VUE3.X全局组件和局部组件的注册

一、全局组件的注册

        1.现在main.js中导入组件

        2.调用app实例的component()方法，在全局注册组件

import { createApp } from 'vue'
import App from './App.vue'
// 全局注册组件
// 1.先导入组件
import MyHome from '@/components/MyHome'

const app = createApp(App)

// 2.调用app实例的component()方法，在全局注册组件
app.component('MyHome',MyHome)

app.mount('#app')

        3.在页面中直接使用全局组件

<template>
  <h2>App根组件</h2>
  <!-- 全局组件的使用 -->
  <MyHome></MyHome>
</template>

<script>
export default {
  name: 'App',
}
</script>

二、局部组件的注册

        1.在要使用的页面导入组件

        2.在components中声明组件

<template>
  <h2>App根组件</h2>
  <!-- 全局组件的使用 -->
  <MyHome></MyHome>
  <!-- 局部组件的使用 -->
  <MyHeader></MyHeader>
</template>

<script>
  // 局部组件注册
  // 1.引入组件
  import MyHeader from '@/components/MyHeader.vue'
export default {
  name: 'App',
  // 2.声明局部组件
  components:{
    MyHeader,
  }
}
</script>

全局注册组件和局部注册组件的区别：

        全局组件可以在直接在页面上使用，局部组件只能在当前导入的范围内使用