Vue组件：注册

组件注册

一个 Vue 组件在使用前需要先被“注册”，这样 Vue 才能在渲染模板时找到其对应的实现。

组件注册有两种方式：全局注册和局部注册。

全局注册

可以使用Vue 应用实例的 “实例”.component() 方法，让组件在当前 Vue 应用中全局可用。

基本使用

import { createApp } from 'vue'

const app = createApp({/* 根组件选项 */})

app.component('注册的名字', {/* 组件的实现 */})

app.mount('#app');

细节

1. 对于组件的实现，

• 可以在注册时定义：

app.component("todolist", {
    props: [`todo`],
    template: `<li>{{todo.text}}</li>`
})

• 也可以注册被导入的单文件组件：

import Child from './Child.js'

app.component("Child", Child)

2. .component() 方法可以被链式调用：

app.component("Child", Child)
     .component("todolist", {
         props: [`todo`],
         template: `<li>{{todo.text}}</li>`
     })

3. 所有的子组件也可以使用全局注册的组件，这意味着这三个组件也都可以在彼此内部使用。

缺点

1. 组件在全局注册，但其中没有被使用的组件无法在生产打包时被自动移除（tree-shaking）；

2. 在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时，不太容易定位子组件的实现。影响应用长期的可维护性。

---

局部注册

局部注册的组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。它的优点是使组件之间的依赖关系更加明确，并且对 tree-shaking 更加友好。

基本使用

需要使用components 选项：

import Child from './Child.js'
import { createApp } from 'vue'

const app = createApp({
    components: {
        Child,
    }
})

app.mount('#app');

对于每个components 对象里的属性，它们的 key 名就是注册的组件名，而值就是相应组件的实现。

    components: {
        Child,
    }
    // 等价于
    components: {
        Child:Child,
    }

---

内容参考自： Vue.js 官方文档