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

2023-06-11 07:31| 来源: 网络整理| 查看: 265

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

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

1. 前言

在Vue工程中，组件是经常使用的可复用模块。

在组件使用之前，需要先注册组件，只有注册了的组件才能使用。

Vue中组件注册有两种方式，全局注册与局部注册。一般来说，项目中引入的组件库，例如Element，因为在各个页面中经常需要调用，所以建议采用全局注册的方式；而我们自己开发的组件，通用性往往没有那么强，所以建议使用局部注册的方式。

接下来，我们就来演示下这两种方式是如何使用的。

2. 开发一个组件

首先，我们开发一个简单的计数器组件，每点击一次按钮，该组件就将显示的数字+1。

在Vue工程的src/components下面，新建MyCounter.vue组件，代码如下：

当前计数:{{count}} 加1 export default { name: "MyCounter", data() { return { count: 0, } }, methods: { btnAdd() { this.count++; } } } 3. 全局注册

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

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

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

4. 局部注册

局部注册插件，是指在某个Vue页面中局部使用。代码如下：

import MyCounter from '@/components/MyCounter.vue'; export default { name: 'Home', components: { MyCounter } }

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

5. 小结

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

【本文地址】

今日新闻