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

阳光穿透心脏的1/2处 2022-08-30 11:20 268阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 前言
 *  2. 开发一个组件
 *  3. 全局注册
 *  4. 局部注册
 *  5. 小结

# 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)

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

# 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. 小结 #

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

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926