什么时注册单元Vue3.0之组件-上海聚慕医疗器械有限公司

组件是Vue最核心的功能之一，也是最难掌握的，它支持自定义tag和原生HTML元素的扩展。

Q:那么组件的核心目标是什么？

A：提高代码的可重用性，减少重复性开发，从而提高工作效率。

本节介绍与组件有关的内容，并通过几个实例和小伙伴们介绍如何使用Vue组件。

一个 Vue 组件在使用前需要先被“注册”，这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式：全局注册和局部注册。

全局注册需要确保在根实例初始化之前注册，这样才能使组件在任意实例中被使用，上代码 ⬇

import { createApp } from 'vue'

const app = createApp({})

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

全局注册可以传入两个参数：①组件名 ②组件的构造函数definition,可以使Function,也可以是Object。如果传入，返回应用实例，反则返回组件定义。

全局注册的组件可以在此应用的任意组件的模板中使用：

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

组件注册后，可以在父实例的模块中以自定义元素的形式使用，不过要确保在初始化根实例之前注册组件。

全局注册往往是不够理想的，因为全局注册所有的组件意味着即使不再使用，它仍会被包含在最终的构建结果中，这造成了用户下载的JavaScript的无谓增加。

局部注册限定了组件只能在被注册的组件中使用。

在使用 <script setup> 的单文件组件中，导入的组件可以直接在模板中使用，无需注册：

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

<template>
  <ComponentA />
</template>

如果没有使用 <script setup>，则需要使用 components 选项来显式注册：

import ComponentA from './ComponentA.vue'

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

  }
}

对于components对象中的每个property来说，property名就是自定义元素的名字，property值就是组件的选项对象。注意：局部注册的组件在其子组件中不可用

若希望ComponentA在ComponentB中使用，代码如下：

const ComponentA = {
}
const ComponentB = {
components:{
'component-a':ComponentA
}}

补充：

Vue组件的模板在某些情况下会受HTML限制，例如：<table>内只允许是<tr>、<td>、<th>等表格元素，所有在<table>内直接使用组件是无效的，常见的限制元素还有：<ul>、<ol>、<select>。

什么时注册单元Vue3.0之组件