组件的注册和引用

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

一.注册组件

当在Vue 项目中定义了一个新的组件后，要想在其他组件中引用这个新的组件，需婴对新的组件进行注册。在注册组件的时候，需要给组件取一个名字，从而区分每个组件,可以采用帕斯卡命名法（PascalCase）为组件命名。
Vue 提供了两种注册组件的方式，分别是全局注册和局部注册。接下来对这两种注册
组件的方式分别进行讲解

1.全局注册

在实际开发中，如果某个组件的使用频率很高，许多组件中都会引用该组件，则推荐将该组件全局注册。被全局注册的组件可以在当前Vue项目的任何一个组件内引用。在Vue项目的srcmain.js 文件中，通过 Vie 应用实例的component()方法可以全局注册组件，该方法的语法格式如下

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

 上述语法格式中，componen1(）方法接收两个参数，第1个参数为组件名称，注册完成
后即可全局使用该组件名称，第2个参数为需要被注册的组件。
例如，在srclmain.js文件中注册一个全局组件MyComponent，示例代码如下

1 import { createApp } from 'vue';
2 import './style.css'
3 import App from './App.vue'
4 import MyComponent from './components/MyComponent. vue'
5 const app = createApp (App)
6 app.component('MyComponent', MyComponent)
7 app.mount('#app')

 在上述代码中，第4行代码用于导入MyComponent组件；第5行代码用于创建Vue座
用实例；第6行代码用于将MyComponent组件注册为全局组件。
component(）方法支持链式调用，可以连续注册多个组件，示例代码如下

1 app.component ('ComponentA',ComponentA)
2.component('ComponentB', ComponentB)
3.component('Componentc',ComponentC）

2.局部注册

 在实际开发中，如果某些组件只在特定的情况下被用到，推荐进行局部注册。

局部注册即在某个组件中注册，被局部注册的组件只能在当前注册范围内使用。

例如，在组件A
中注册了组件B，则组件B只能在组件A中使用，不能在组件C中使用。
局部注册组件的示例代码如下。

 1 <script>
 2 import ComponentA from './ComponentA. vue
 3 export default (
 4components: { ComponentA: ComponentA}

 5 }
 6 </script>

二.引用组件 

       将组件注册完成后，若要将组件在页面中渲染出来，需要引用组件。默认情况下，Vue
项目中有一个根组件，根组件可以引用其他组件，引用后会形成父子关系—根组件是父组件，被引用的组件是子组件。在子组件中也可以引用其他组件。
       在组件的<template>标签中可以引用其他组件，被引用的组件需要写成标签的形式，标签名应与组件名对应。组件的标签名可以使用短横线分隔或帕斯卡命名法命名。例如，<my-component>标签和<MyComponent标签都表示引用MyComponent组件。一个组件可以被引用多次，但不可出现自我引用和互相引用的情况，否则会出现死循环。 接下来通过实际操作的方式演示组件的使用方法，具体步骤如下

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

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

</style>