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)

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐