vue 通用组件

类似 element ui 中的 this.$message.success('提交成功') 这种通用组件是怎么生成的?

–Loading
|Loading.vue
|index.js

Loading.vue

<template>
  <div v-show="show" class="loading"></div>
</template>
<script>
export default {
  name: "loading",
  props: {},
  data() {
    return {
      show: false
    };
  },
  methods: {
    init() {}
  },
  mounted() {
    this.init();
  }
};
</script>
<style lang="scss" scoped>
...
</style>

index.js

import Vue from 'vue'
import Loading from "./Loading"

const LoadingConstructor = Vue.extend(Loading);
const Ld = {
  init() {
    if (this.is_inited) {
      return;
    }
    this.is_inited = true;

    this.instance = new LoadingConstructor({
      data: {},
    });
    this.instance.vm = this.instance.$mount();    // $mount() 没有参数时，模板将被渲染为文档之外的元素
    document.body.appendChild(this.instance.$el); // 这种情况下必须使用原生 DOM API 把它插入文档中
    this.instance.dom = this.instance.$el;
  },

  show() {
    this.init();
    this.instance.vm.show = true;                 // 可直接操作 Loading.vue 的 data
  },
  hide() {
    this.init();
    this.instance.vm.show = false;
  },
}

export default Ld;

使用

import Ld from "xxx/Loading";

Ld.show();
or 
Ld.hide();

当然也可以挂下 Vue 下
main.js

import Vue from 'vue'
import Loading from "xxx/Loading";

Vue.prototype.$loading = Loading;

在其它 vue 中

this.$loading.show();
or 
this.$loading.hide();

参考:
element-ui Message组件源码分析整理笔记（八）
Vue 基础知识之 Vue.extend