注册组件

全局注册

假设你的 src\components 文件夹内有一个名为 MyComponent.vue 的组件。

我们可以在 src/main.js 里面修改，以全局注册这个组件。

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

// createApp(App).mount('#app')

// 以下为新增
import MyComponent from './components/MyComponent.vue'
const app = createApp(App)
app.component('MyComponent', MyComponent)
app.mount('#app')

其中 component 函数支持链式调用，可以这样写：

app.component('MyComponentA', MyComponentA)
	.component('MyComponentB', MyComponentB)
	.component('MyComponentC', MyComponentC)

使用

可以在此项目的任意模板中使用：

<ComponentA/>
<ComponentB/>
<ComponentC/>

弊端

• 全局注册的组件，即使未被使用也会被打包
• 全局注册的组件，在大型项目中的依赖关系不会显得那么明确

局部注册

有 <script setup>

在单个组件的 <script setup> 中，import 导入另一个组件后，即可在模板中直接使用，后续用法与全局注册的组件没啥区别。

没有 <script setup>

需要使用 components 选项来显式注册：

import ComponentA from './ComponentA.js'

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

对于每个 components 对象里的属性，它们的 key 名就是注册的组件名，而值就是相应组件的实现。上面的例子中使用的是 ES2015 的缩写语法，等价于：

export default {
  components: {
    ComponentA: ComponentA
  }
  // ...
}

请注意：局部注册的组件在后代组件中*不*可用。在这个例子中，ComponentA 注册后仅在当前组件可用，而在任何的子组件或更深层的子组件中都不可用。

补充

不能引入引入了本组件的组件，这就死循环了。