1. 前言
在Vue工程中，组件是经常使用的可复用模块。
在组件使用之前，需要先注册组件，只有注册了的组件才能使用。
Vue中组件注册有两种方式，全局注册与局部注册。一般来说，项目中引入的组件库，例如Element，因为在各个页面中经常需要调用，所以建议采用全局注册的方式；而我们自己开发的组件，通用性往往没有那么强，所以建议使用局部注册的方式。
接下来，我们就来演示下这两种方式是如何使用的。
2. 开发一个组件
首先，我们开发一个简单的计数器组件，每点击一次按钮，该组件就将显示的数字+1。
在Vue工程的src/components下面，新建MyCounter.vue组件，代码如下：
<template>
<div>
当前计数:{{count}}
<button @click="btnAdd">加1</button>
</div>
</template>
<script>
export default {
name: "MyCounter",
data() {
return {
count: 0,
}
},
methods: {
btnAdd() {
this.count++;
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
3. 全局注册
在main.js中引入组件，然后通过Vue.component方法全局注册组件。
// 全局注册组件
import MyCounter from "./components/MyCounter.vue";
Vue.component('MyCounter', MyCounter)
1
2
3
全局注册后，在项目的任意位置均可使用组件。
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<!-- 直接使用即可 -->
<MyCounter></MyCounter>
</div>
</template>
1
2
3
4
5
6
7
4. 局部注册
局部注册插件，是指在某个Vue页面中局部使用。代码如下：
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<MyCounter></MyCounter>
</div>
</template>
<script>
import MyCounter from '@/components/MyCounter.vue';
export default {
name: 'Home',
components: {
MyCounter
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
此处需要注意，首先得在components属性中注册组件，然后才能在页面代码部分引用组件。
5. 小结
掌握组件注册的两种方式，是学习组件的基础。
————————————————
版权声明：本文为CSDN博主「熊猫大哥大」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/woshisangsang/article/details/118914573
