Javascript

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

本文主要是介绍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. 小结

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

这篇关于Vue 组件的全局注册与局部注册的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!