组件的注册和引用

在Vue中，开发者可以将页面中独立的、可重用的部分封装成组件，对组件的结构，样式和行为进行设置。组件是 Vue 的基本结构单元，组件之间可以相互引用。

---

一.注册组件

当在Vue项目中定义了一个新的组件后，要想在其他组件中引用这个新的组件，需要对新的组件进行注册。在注册组件的时候，需要给组件取一个名字，从而区分每个组件，可以采用帕斯卡命名法(PascalCase)为组件命名。

Vue 提供了两种注册组件的方式，分别是全局注册和局部注册。接下来对这两种注册组件的方式分别进行讲解。

---

1.全局注册

           在实际开发中，如果某个组件的使用频率很高，许多组件中都会引用该组件，则推荐将该组件全局注册。被全局注册的组件可以在当前Vue项目的任何一个组件内引用。

            在 Vue 项目的 src\main.js 文件中，通过 Vue 应用实例的 component()方法可以全局注册组件，该方法的语法格式如下。

component('组件名称'，需要被注册的组件)

        上述语法格式中，component()方法接收两个参数，第1个参数为组件名称，注册完成后即可全局使用该组件名称，第2个参数为需要被注册的组件。

        例如，在 src\main.js 文件中注册一个全局组件 MyComponent，示例代码如下。

import {createApp )from 'vue';
import'./style.css'
import App from'./app.vue' const app =createApp(App)import MyComponent from './components/MyComponent.vue'app.component('MyComponent',MyComponent)app.mount('#app')

        在上述代码中，第4行代码用于导入 MyComponent 组件;第5行代码用于创建Vue应用用实例;第6行代码用于将MyComponent组件注册为全局组件。

        component()方法支持链式调用，可以连续注册多个组件，示例代码如下。

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

---

2.局部注册

        在实际开发中，如果某些组件只在特定的情况下被用到，推荐进行局部注册。局部注册即在某个组件中注册、被局部注册的组件只能在当前注册范围内使用。例如，在组件A中注册了组件B，则组件B只能在组件A中使用，不能在组件C中使用。

        局部注册组件的示例代码如下。

<soript>
import ComponentA from './ComponentA.vue'
export default{
components:{ ComponentA:ComponentA}
}</script>

        在上述代码中，第4行代码用于将 ComponentA 组件局部注册到当前组件中。其中,冒号前面的ComponenA 是局部注册的组件名称，冒号后面的ComponentA 是组件本身。由于冒号前后代码相同，所以可以将(ComponentA:ComponentA }简写为{ComponentA}。

        在使用 setup语法糖时，导人的组件会被自动注册,无须手动注册，导入后可以直接在模板中使用，示例代码如下。

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

        上述代码完成了 ComponentA 组件的导入和注册。

---

二.引用组件

        将组件注册完成后，若要将组件在页面中渲染出来，需要引用组件。默认情况下，Vue项目中有一个根组件，根组件可以引用其他组件，引用后会形成父子关系--根组件是父组件，被引用的组件是子组件。在子组件中也可以引用其他组件。

        在组件的<template>标签中可以引用其他组件，被引用的组件需要写成标签的形式,标签名应与组件名对应。组件的标签名可以使用短横线分隔或帕斯卡命名法命名。例如，<my-component>标签和<MyComponent>标签都表示引用 MyComponent 组件。一个组件可以被引用多次，但不可出现自我引用和互相引用的情况，否则会出现死循环。

        接下来通过实际操作的方式演示组件的使用方法，具体步骤如下。

① 创建 src\components\ComponentUse.vue 文件，具体代码如下。

<template>
<h5>父组件</h5>
<div class="box">
</div></template><style>.box{display: flex;}
</style>

        在上述代码中,第3~4行代码定义了 div 元素,该 div元素将作为被引用组件的容器:第7~9行代码用于将 div 元素设置为弹性盒子。

② 修改 sre\main.js文件，切换页面中显示的组件，具体代码如下。

 <template>
<div class="global-container">
<h5>全局组件</h5>
</template>
</div><style>
.global-container{
border: lpx solid black;
height: 50px;
flex: 1;
}
</style>

        在上述代码中，第1~5行代码通过<template>标签定义 GlobalComponent 组件的模板:第6~12 行代码通过<style>标签定义 GlobalComponent 组件的样式。

④ 创建 src\components\LocalComponent.vue 文件，表示局部组件，具体代码如下。

<template>
<div class="local-container">
<h5>局部组件</h5>
</div></template><style>
.local-container {
border: 1px dashed black;height: 50px;flex:1;}
</style>

        在上述代码中，第1~5 行代码通过<template>标签定义 LocalComponent 组件的模板第6~12 行代码通过<style>标签定义 LocalComponent 组件的样式。

⑤ 修改 src\main.js 文件，导人 GlobalComponent组件并调用 component( )方法全局注册ClobalComponent组件，具体代码如下。

import { createApp }from 'vue'
import './style.css'
import App from'./components/ComponentUse.vue'
import GlobalComponent from'./components/GlobalComponent .vue'
const app =createApp(App)
app.component('GlobalComponent', GlobalComponent)
app.mount('#app')

        在上述代码中,第4行代码通过 impont 语法导入 GlobalComponent 组件;第6行代码过调用 component()方法全局注册 GlobalComponent 组件。

⑥ 修改 srekcomponents\ComponentUse.vue 文件，添加代码导人 LocalComponent 组件具体代码如下。

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

        ⑦ 修改 srckcomponents\CcomponenUse.vue 文件，在class为 box的<div>标签中引用GlobalComponent 组件和 LocalComponent 组件，具体代码如下。

<div class="box">
<GlobalComponent />
<LocalComponent/>
</div>

        在上述代码中,第2行和第3行代码分别在ComponentUse 组件中以标签的形式引用了GlobalComponent 组件和 LocalComponent 组件。

        保存上述代码后，在浏览器中访问 http://127.0.0.1:51731,引|用组件后的页面效果如图所示。

         从图可以看出，在ComponentUse 组件中成功引用了 GlobalComponent 组件和LocalComponent组件，页面中显示了GlobalComponent组件和 LocalComponent 组件的内容。

---

感谢大家的阅读，如有不对的地方，可以私信我，感谢大家！