---

组件的注册

组件之间可以进行相互的引用。

vue 中组件的引用原则：先注册后使用。

1.1 注册组件的两种方式

vue 中注册组件的方式分为“全局注册”和“局部注册”两种，其中：

被全局注册的组件，可以在全局任何一个组件内使用
被局部注册的组件，只能在当前注册的范围内使用

1.2 全局注册组件

// 1. 按需导入 createApp 函数
import { createApp } from 'vue'
// 2. 导入待渲染的 App.vue 组件
import App from './App.vue'

// 1. 导入需要被全局注册的组件
import Swiper from './components/01.globalReg/Swiper.vue'
import Test from './components/01.globalReg/Test.vue'

// 3. 调用 createApp 函数，创建 SPA 应用的实例
const app = createApp(App)

// 2. 调用 app.component() 方法全局注册组件
app.component('MySwiper', Swiper)
app.component('MyTest', Test)

// 4. 调用 mount() 把 App 组件的模板结构，渲染到指定的 el 区域中
app.mount('#app')

1.3 使用全局注册组件

使用 app.component() 方法注册的全局组件，直接以标签的形式进行使用即可。

<template>
  <h1>这是 <i>App.vue</i> 根组件</h1>
  <hr />
  <MyTest></MyTest>
</template>

1.4 局部注册组件

<script>
import Search from './components/02.privateReg/Search.vue'

export default {
  // 组件的名称
  name: 'MyApp',
  components: {
    'my-search': Search,
  },
}
</script>

<template>
  <my-search></my-search>
</template>

1.5 全局注册和局部注册的区别

被全局注册的组件，可以在全局任何一个组件内使用
被局部注册的组件，只能在当前注册的范围内使用

应用场景：

如果某些组件在开发期间的使用频率很高，推荐进行全局注册；
如果某些组件只在特定的情况下会被用到，推荐进行局部注册。

1.6 组件注册时名称的大小写

在进行组件的注册时，定义组件注册名称的方式有两种：

① 使用 kebab-case 命名法（俗称短横线命名法，例如 my-swiper 和 my-search）
② 使用 PascalCase 命名法（俗称帕斯卡命名法或大驼峰命名法，例如 MySwiper 和 MySearch）

短横线命名法的特点：

必须严格按照短横线名称进行使用

帕斯卡命名法的特点：

既可以严格按照帕斯卡名称进行使用，又可以转化为短横线名称进行使用

注意：在实际开发中，推荐使用帕斯卡命名法为组件注册名称，因为它的适用性更强。

// 1. 按需导入 createApp 函数
import { createApp } from 'vue'
// 2. 导入待渲染的 App.vue 组件
import App from './App.vue'

// 1. 导入需要被全局注册的组件
import Swiper from './components/01.globalReg/Swiper.vue'
import Test from './components/01.globalReg/Test.vue'

// 3. 调用 createApp 函数，创建 SPA 应用的实例
const app = createApp(App)

// 2. 调用 app.component() 方法全局注册组件
app.component('MySwiper', Swiper)
app.component('MyTest', Test)

// 4. 调用 mount() 把 App 组件的模板结构，渲染到指定的 el 区域中
app.mount('#app')

<template>
  <h1>这是 <i>App.vue</i> 根组件</h1>
  <hr />
  <my-swiper></my-swiper>
  <MyTest></MyTest>
  <my-test></my-test>
</template>

1.7 通过 name 属性注册组件

在注册组件期间，除了可以直接提供组件的注册名称之外，还可以把组件的 name 属性作为注册后组件的名称。

<template>
  <h3>Swiper 轮播图组件</h3>
</template>

<script>
export default {
  name: 'MySwiper',
}
</script>

```javascript
// 1. 按需导入 createApp 函数
import { createApp } from 'vue'
// 2. 导入待渲染的 App.vue 组件
import App from './App.vue'

// 1. 导入需要被全局注册的组件
import Swiper from './components/01.globalReg/Swiper.vue'
import Test from './components/01.globalReg/Test.vue'

// 3. 调用 createApp 函数，创建 SPA 应用的实例
const app = createApp(App)

// 2. 调用 app.component() 方法全局注册组件
app.component(Swiper.name, Swiper)
app.component(Test.name, Test)

// 4. 调用 mount() 把 App 组件的模板结构，渲染到指定的 el 区域中
app.mount('#app')

组件名与导入名一样

<script>
export default {
  name: 'MyStyle',
  }
</script>

<script>
import MyStyle from './Style.vue'

export default {
  name: 'MyApp',
  components: {
    MyStyle
  }
}
</script>