Vue 组件的全局注册与局部注册
2021/7/20 13:05:54
本文主要是介绍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 组件的全局注册与局部注册的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist