---

定制软件开发组件的注册

定制软件开发组件之间可以进行相互的引用。

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

1.3 使用全局注册组件

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

<template>  <h1>这是 <i>App.vue</i> 根组件</h1>  <hr />  <MyTest></MyTest></template>
1
2
3
4
5

1.4 局部注册组件

<script>import Search from './components/02.privateReg/Search.vue'export default {  // 组件的名称  name: 'MyApp',  components: {    'my-search': Search,  },}</script>
1
2
3
4
5
6
7
8
9
10
11

<template>  <my-search></my-search></template>
1
2
3

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')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<template>  <h1>这是 <i>App.vue</i> 根组件</h1>  <hr />  <my-swiper></my-swiper>  <MyTest></MyTest>  <my-test></my-test></template>
1
2
3
4
5
6
7

1.7 通过 name 属性注册组件

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

<template>  <h3>Swiper 轮播图组件</h3></template><script>export default {  name: 'MySwiper',}</script>
1
2
3
4
5
6
7
8
9

```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')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

组件名与导入名一样

<script>export default {  name: 'MyStyle',  }</script>
1
2
3
4
5

<script>import MyStyle from './Style.vue'export default {  name: 'MyApp',  components: {    MyStyle  }}</script>
1
2
3
4
5
6
7
8
9
10