Vue中如何注册全局组件和局部组件(详解)
Vue 注册组件有两种,一种是全局组件,一种是局部组件。整个项目经常用到的用全局写法 (优点:多次使用,方便省事
),而使用局部组件的情况比较少(除需要专供特定页面)。
注册全局组件:
当你注册完之后,可以在任何组件中直接使用标签,而不需要在各个组件中引入并局部注册 通常公共组件放在src文件夹下的components文件夹中,这里的组件进行全局注册。
方法步骤:
1、在src文件夹中新建components文件夹,components文件夹中一般存放组件文件.
2、在文件夹中新建components.js文件
3、在components.js文件引入所有要注册的全局组件
4、在main.js中引入components.js文件并使用Vue.use()全局注册
代码演示: -components.js文件中
import 组件名字A from '@/components/组件名字A'
import 组件名字B from '@/components/组件名字B ' export default (Vue)=>{
Vue.component("组件名字A", 组件名字A )// 前者必须是字符串格式
Vue.component('组件名字B', 组件名字B )
}
在main.js引入插件
import components from '@/components/components.js'Vue.use(components)new Vue({
// ...
})
全局组件的使用(直接使用)
<组件名称>组件名称>
注册局部组件:
【Vue中如何注册全局组件和局部组件(详解)】页面中私有的组件放在各自的页面文件夹中并使用下面代码局部注册
import ComponentA from './ComponentA'
import ComponentB from './ComponentB'
export default {
name: "part",
components: { ComponentA, ComponentB },
}
推荐阅读
- 热闹中的孤独
- Shell-Bash变量与运算符
- JS中的各种宽高度定义及其应用
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 深入理解Go之generate
- 考研英语阅读终极解决方案——阅读理解如何巧拿高分
- 异地恋中,逐渐适应一个人到底意味着什么()
- 如何寻找情感问答App的分析切入点
- vue-cli|vue-cli 3.x vue.config.js 配置
- 我眼中的佛系经纪人