前言
一开始接触到vue中的组件的时候，对于组件的理解还是不够充分的，最近在开发个人博客项目中，一开始就没准备使用一些现在比较流行的UI库（毕竟是个人项目，多练练手还是好的），所以需要自己开发几个全局组件，这里以MessageBox为例记录下vue.js如何开发全局组件。所谓全局变量是针对vue实例下说的，即所有的vue实际都可以运用到这个组件，局部组件就是针对某个实例来说的，只有这个vue实例下才能发挥作用，下面话不多说了，来一看看详细的介绍吧。
源码
组件模板
Box/index.vue
给组件添加全局功能
vue.js官方文档中有nofollow" target="_blank" href="https://cn.vuejs.org/v2/guide/plugins.html">开发插件的介绍。具体实现代码如下：
import msgboxVue from './index.vue';
// 定义插件对象
const MessageBox = {};
// vue的install方法，用于定义vue插件
MessageBox.install = function (Vue,options) {
const MessageBoxInstance = Vue.extend(msgboxVue);
let currentMsg,instance;
const initInstance = () => {
// 实例化vue实例
currentMsg = new MessageBoxInstance();
let msgBoxEl = currentMsg.$mount().$el;
document.body.appendChild(msgBoxEl);
};
// 在Vue的原型上添加实例方法，以全局调用
Vue.prototype.$msgBox = {
showMsgBox (options) {
if (!instance) {
initInstance();
}
if (typeof options === 'string') {
currentMsg.content = options;
} else if (typeof options === 'object') {
Object.assign(currentMsg,options);
}
return currentMsg.showMsgBox();
}
};
};
export default MessageBox;
// 定义插件对象
const MessageBox = {};
// vue的install方法，用于定义vue插件
MessageBox.install = function (Vue,options) {
const MessageBoxInstance = Vue.extend(msgboxVue);
let currentMsg,instance;
const initInstance = () => {
// 实例化vue实例
currentMsg = new MessageBoxInstance();
let msgBoxEl = currentMsg.$mount().$el;
document.body.appendChild(msgBoxEl);
};
// 在Vue的原型上添加实例方法，以全局调用
Vue.prototype.$msgBox = {
showMsgBox (options) {
if (!instance) {
initInstance();
}
if (typeof options === 'string') {
currentMsg.content = options;
} else if (typeof options === 'object') {
Object.assign(currentMsg,options);
}
return currentMsg.showMsgBox();
}
};
};
export default MessageBox;
全局使用
页面调用
{
// ...
}).catch(() => {
// ...
});
最后来张效果图
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对编程之家的支持。
