Vue3 - 组件注册

组件的注册

• 组件注册分为全局注册为和局部注册

全局注册

• 全局注册就是通过app.component('组件名'， 组件实例)

import MyComponent from './App.vue'// 引入实例
app.component('MyComponent', MyComponent) // 组件注册

• 通过app.component()全局注册还可以进行链式调用进行多组件注册，如下：

app
  .component('ComponentA', ComponentA)
  .component('ComponentB', ComponentB)
  .component('ComponentC', ComponentC)

• 全局注册之后再该应用下的任意组件模板中都可以使用，无需再单独注册

<!-- 这在当前应用的任意组件中都可用 -->
<ComponentA/>
<ComponentB/>
<ComponentC/>

局部注册

• 在单个组件模板中对组件进行单独使用

• 在vue3中，如果你使用的是<script setup>，那么引入组件之后可以直接去使用它。

<script setup>
import ComponentA from './ComponentA.vue'
</script>

<template>
  <ComponentA/>
</template>

• 如果你不是用的<script setup>，那你就得使用components选项来显示注册（和vue2一致）

import ComponentA from './ComponentA.js' // 引入

export default {
  components: {
    ComponentA // 注册，es6写法，组件名和引入组件名字一致可以简写
  },
  setup() {
    // ...
  }
}

全局和局部注册组件的优劣

• 相同点：都可以对组件进行注册使用

• 区别：

• 全局注册后其他组件模板无需再引入使用，局部注册仅能在引入它的模板组件中使用，在注册组件的后代组件中也不可以使用其父级引入的组件

• 全局注册的组件无法在生产打包时自动移除，如果你全局注册了一个组件但是却并没有使用的话，那它依然还是会出现在打包后的JS文件中，局部注册没有这个问题

• 全局注册在大型项目中使项目的依赖关系变得不那么明确，在父组件中使用子组件时，不太容易定位子组件的实现。和使用过多的全局变量一样，这可能会影响应用长期的可维护性。而对于局部注册的组件而言，需要在使用它的父组件中显式导入，并且只能在该父组件中使用。它的优点是使组件之间的依赖关系更加明确，并且对 tree-shaking 更加友好。

• 在开发中还是推荐局部注册的方式使用组件，关系更加明确

组件名格式

• 命名一个组件应该有一定的规范，一般我们都会使组件名的每个单词首字母大写的方式进行命名，也就是PascalCase 命名法。

• 在在引入使用该组件标签时，我们可以通过<MyComponent> 或 <my-component> 引用。（建议使用 PascalCase，因为这提高了模板的可读性，能帮助我们区分 Vue 组件和原生 HTML 元素）