vue掛載全局組件


日常開發過程中封裝了一些通用的公共組件,但是每次調用時不想引入組件結構,這時候就需要掛載到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");
    },
});

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com