日常开发过程中封装了一些通用的公共组件，但是每次调用时不想引入组件结构，这时候就需要挂载到vue上供所有的实例用类似方法的形式调用，所以需要对组件进行注册。
假设我们封装一个公共组件confirm.vue，
然后我们把它挂载到vue上：
import Confirm from "./confirm";
export default {
install(Vue) {
function confirm(data = {}) {
const { confirm, cancel, close, ...restProps } = data;
const ConfirmConstructor = Vue.extend(Confirm);
const instance = new ConfirmConstructor({
el: document.createElement("div"),
propsData: {
...restProps,
},
});
if (confirm) {
instance.$on("confirm", confirm);
}
if (cancel) {
instance.$on("cancel", cancel);
}
document.querySelector("body").appendChild(instance.$el);
}
Vue.prototype.$confirm = confirm;
return confirm;
},
};这时候我们就可以用方法调用了：
this.$confirm({
title: "自定义标题",
message: "自定义消息",
cancelText: "cancel",
confirmText: "ok",
confirm: () => {
alert("confirm");
},
cancel: () => {
alert("cancel");
},
});
