组件注册

组件只有先被"注册",才能被使用,注册组件分为:全局注册和局部注册

全局注册

使用Vue实例的.component()方法将组件注册在全局中,这样组件在当前Vue实例的任何地方都可以使用

import { createApp } from 'vue'
import App from './App.vue'
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
const app = createApp(App)
app.component('ComponentA', ComponentA)
app.component('ComponentB', ComponentB)
app.mount('#app')

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

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

局部注册

全局注册面对的问题:

• 全局注册的但没有使用的组件,无法再生产打包时被自动移除,即使没有使用也会出现在打包后的js文件中
• 当项目变大,全局注册会使项目中 的依赖关系变得不那么明确,在父组件中使用时不太容易定位子组件的实现,可能会影响长期的可维护性

相比之下,在需要的时候在父组件中显示导入称为局部注册.导入的组件只能在父组件中使用,使组件之间的依赖关系更加明确,并且在没有使用时打包可以移除

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

<template>
  <ComponentA />
</template>

import ComponentA from './ComponentA.js'

export default {
  components: {
    ComponentA,
  },
  setup() {
    // ...
  },
}

对于components对象里的属性,他们的key名就是注册的组件的名字,而值就是对应组件的实例

import ComponentA from './ComponentA.js'
import ComponentB from './ComponentB.js'
export default {
  components: {
    ComponentA,
    ComponentB,
  },
  setup() {
    // ...
  },
}

注册语法糖

在Vue 3中,Vue为组件注册提供了语法糖,使用defineComponent函数来定义组件,这样就可以直接在components选项中声明组件,而不需要再单独导入

import { defineComponent } from 'vue'
import ComponentA from './ComponentA.js'
import ComponentB from './ComponentB.js'
export default defineComponent({
  components: {
    ComponentA: ComponentA,
    ComponentB: ComponentB,
  },
  setup() {
    // ...
  },
})

注意: 局部注册的组件只能在当前组件中使用,任意当前组件的父组件或子组件中都是不可用的

组件命名格式

推荐使用 PascalCase 作为组件名的注册格式
1.PascalCase 是合法的 JavaScript 标识符。这使得在 JavaScript 中导入和注册组件都很容易，同时 IDE 也能提供较好的自动补全。

2.<PascalCase /> 在模板中更明显地表明了这是一个 Vue 组件，而不是原生 HTML 元素。同时也能够将 Vue 组件和自定义元素 (web components) 区分开来。

需要注意,我们之前说过,在DOM内模板中需要使用短横线连接符的方式命名.

为了方便,在Vue中支持将 kebab-case 的标签解析为使用 PascalCase 注册的组件,例如:

<component-a></component-a>
<ComponentA></ComponentA>