VUE 2.x中全局组件的封装(一)

1.自定义组件


 

 

2.给自定义的组件添加install方法

创建一个js文件,我将此文件命名为BreadCrumb.js,js文件代码如下:

import BreadCrumb from './main'
 
// 添加install方法
BreadCrumb.install = function(Vue) {
  Vue.component(BreadCrumb.name, BreadCrumb);
};
 
export default BreadCrumb;

3.在 main.js 中引用

import Vue from 'vue'
import App from './App.vue'
 
import BreadCrumb from '@/components/BreadCrumb.js'//引用全局组件Button
 
Vue.use(BreadCrumb); // 使用全局组件BreadCrumb
 
new Vue({
  render: h => h(App),
}).$mount('#app')

4.在页面中使用


原文链接:https://blog.csdn.net/daipianpian/article/details/100041917

你可能感兴趣的:(VUE 2.x中全局组件的封装(一))