组件的注册

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

全局注册

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

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

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

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

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

局部注册

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

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

import ComponentA from './ComponentA.vue'

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

import ComponentA from './ComponentA.js' // 引入export default {components: {ComponentA // 注册，es6写法，组件名和引入组件名字一致可以简写},setup() {// ...}}
全局和局部注册组件的优劣

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

  • 区别：

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

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

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

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

组件名格式

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

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