vue项目中如何直接使用this.xxx调用组件，不用import组件

前提：最近开发了一个导出文件的公共组件，但组内的小伙伴觉得好麻烦，每次都需要import该组件，然后在html模块中写组件的标签，传参等等，觉得好麻烦，希望可以像element UI中的【message】一样，直接 【this.$message({type:"success",text:"成功"})】就可以展示出组件，所以就打算改造一下，方便使用。

1. import组件使用的方式如下：

首先开发了一个【commonExport.vue】，然后在业务中使用。

   

 

 好了，前面说了我们比较常用的使用组件方式，但有点小麻烦，需要写组件标签等等，所以下面对他进行调整，直接绑在vue上作为一个方法去调用。

2.this.$export方法调用的方式使用的方式如下：

（1）首先创建了一个【instance.js】文件

// instance.js 
import commonExport from './index.vue'
import { omit } from "lodash-es"
const Export = {};
let instance = null;
Export.install = Vue => {
  Vue.prototype.$export = (options = {}) => {
    let propsKeys = ["dataType", "selectLength", "total", "exportApi"];
    let props = {};
    propsKeys.forEach(key => {
      props[key] = options[key]
    })
    const ExportConstructor = Vue.extend({
      render(h) {
        return h(commonExport, {
          props: props,
          attrs: {
            ...(omit(options, propsKeys)),
            visible: true
          },
          on: {
            'close'() {
              document.body.removeChild(instance.$el)
              instance.$destroy();
              instance = null;
            }
          }
        })
      }
    })
    if (instance) {
      instance.$destroy();
      instance = null;
    }
    instance = new ExportConstructor()
    instance.$mount(document.createElement('div'))
    document.body.appendChild(instance.$el)
  }
}

export default Export

（2）在main.js中使用Vue.ues()全局使用该插件

import $export from "./commonComponents/commonExport/instance.js"
Vue.use($export)

（3）调用

 （4）效果与引用组件的效果一样一样的