Vue3学习记录（四）--- 组合式API之组件注册和组件数据交互

Vue3学习记录（四）--- 组合式API之组件注册和组件数据交互
一、组件注册

一个创建好的单文件组件（SFC）首先要进行注册，然后才能被别的组件使用。注册方法按照作用域区分为两种：全局注册和局部注册。

1、全局注册

全局注册需要通过main.js中利用createApp()创建的Vue应用实例中提供的component()，对组件进行注册。注册完成后，该组件的适用范围是全局的，可以在当前项目的任一组件中使用全局组件。

component()方法需要两个参数，第一个参数为注册组件的组件名称，也就是如何在别的组件中使用该组件；第二个为引入的组件，表示组件的具体实现内容。
```
import { createApp } from 'vue'
// 导入要注册的组件
import Child from './components/Child.vue'
// 利用createApp()创建应用实例
const app = createApp(App)
// 使用component()注册全局组件
app.component('Child', Child)
1
2
3
4
5
6
7
```
component()方法可以被链式调用，注册多个全局组件，但注册的组件并不存在先后问题，全局组件之间可以彼此调用，在前面注册的组件中，也可以调用在后面注册的组件：
```
// 链式调用 注册多个全局组件
app.component('Child', Child).component('Child2', Child2)
1
2
```
局限：

全局注册的组件，即使没有在页面中被使用，无任何引用关系，但还是会在生产打包时，被打包进去，影响打包速度和打包体积。而且全局注册的方式，会让组件间的关系没那么明确，不利于项目的长期维护。所以只建议将一些通用组件，如按钮、弹窗等组件进行全局注册。

2、局部注册

局部注册需要在父组件中显式的导入要使用的组件，导入之后只能在当前父组件内使用，该父组件中的其他子组件不可以使用父组件中导入的组件。组件之间的依赖关系更明确，而且引入的组件没有在页面中被使用，在生产打包时会被自动移除 (也叫tree-shaking)。

如果是使用

一、组件注册

1、全局注册

局限：

2、局部注册