Vue 组件的全局注册与局部注册

点此查看 所有教程、项目、源码导航

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>

3. 全局注册

在main.js中引入组件，然后通过Vue.component方法全局注册组件。

// 全局注册组件
import MyCounter from "./components/MyCounter.vue";
Vue.component('MyCounter', MyCounter)

全局注册后，在项目的任意位置均可使用组件。

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <!-- 直接使用即可 -->
    <MyCounter></MyCounter>
  </div>
</template>

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>

此处需要注意，首先得在components属性中注册组件，然后才能在页面代码部分引用组件。

5. 小结

掌握组件注册的两种方式，是学习组件的基础。