标签：vue xxx instance export props 组件 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上

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

（3）调用

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

标签：vue,xxx,instance,export,props,组件,import
来源： https://www.cnblogs.com/grow-up-up/p/16358704.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。