Vue-注册全局组件插件的两种方法
Vue-注册全局组件插件的两种方法
·
Vue.use()注册与Vue.component()注册区别就在于一个insatll方法
1,Vue.component() 只能注册一个组件,里面接收两个参数:第一个参数是自定义元素名称,也就是在页面中使用的这个组件的标签名称;
第一种:在main.js中直接注册
// 引入
import PageTools from '@/components/PageTools'
// 注册为全局组件
Vue.component('PageTools', PageTools)
2,Vue.use() 可以一次性注册多个自定义组件;当我们需要进行多个组件的注册时候,假如说都写到main.js
里面的话,这样就会造成main.js文件的臃肿与杂乱;所以可以使用Vue.use() 进行注册;
例子:(项目结构:)
第一步:在components 文件中新建两个组件 comA.vue, comB.vue ,
第二步:utils 文件夹中新建useComponent.js 文件
该文件中引入需要注册的组件;并通过 install 方法导出,方法名字必须叫这个;
import comA from '@/components/demo/comA'
import comB from '@/components/demo/comB'
// 当我们需要进行多个组件的注册时候, 假如说都写到main.js里面的话,
// 这样就会造成main.js文件的臃肿与杂乱
export default {
install(Vue) {
Vue.component('comA', comA);
Vue.component('comB', comB);
}
}
第三步:在main.js 文件中,引入useComponent文件,使用Vue.use() 进行注册插件; 页面中使用<comA></comA> 即可
// 引入useComponent文件,进行注册插件,可以一次注册多个
import useComponent from './utils/useComponent'
Vue.use(useComponent)
更多推荐
已为社区贡献7条内容
所有评论(0)