一、什么是全局组件
- 业务组件一般都定义成了局部组件，使用的时候需要在components中注册，
- 全局通用组件一般是需要定义为全局组件的，不需要局部注册
二、注册方式
2.1、main.js中直接注册全局
import PageTools from '@/components/PageTools'
Vue.component(’PageTools‘, PageTools)
2.2、Vue.use()全局注入
2.2.1、Vue.use()
作用：它是Vue提供一个静态方法，用来向·Vue注册插件(增强vue的功能)。
格式：Vue.use(obj)
Vue.use 可以接收一个对象，Vue.use(obj)
对象obj中需要提供一个 install 函数
在
Vue.use(obj)时，会自动调用该 install 函数，并传入Vue构造器Vue.ues( { install:function ( Vue ){ } } )
2.2.2、新建插件js
- 新建
plugins文件夹、文件夹下面新建index.js文件
import basicContainer from "@/components/basic-container/main";
// 字典标签组件
import DictTag from "@/components/DictTag";
import FlowPath from "@/components/asset/flowPath";
export default {
install: function (Vue) {
// 注册全局容器
Vue.component("basicContainer", basicContainer);
Vue.component("DictTag", DictTag);
Vue.component("FlowPath", FlowPath);
}
};
2.2.4、main.js中
// 引入全局组件
import install from '@/plugins/';
// 注入
Vue.use(install)
三、类比ElementUI
//按钮组件
import ElButton from "@/components/el-button";
//表格组件
import ElTable from "@/components/el-table";
export default {
install: function (Vue) {
// 注册全局容器
Vue.component("ElButton", ElButton);
Vue.component("ElTable ", ElTable );
}
};
main.js中
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
