vue中纯JS调用自定义组件

案例以vant为例

1、首先创建index.vue/index.js文件

 2、index.vue跟我们平常写的组件是一样的

<template>
  <div>
    <van-dialog v-model="showDownloadProgress" :title="title">
      <div class="progress-item">
        <van-progress :percentage="progressNum" stroke-width="8" />
      </div>
    </van-dialog>
  </div>
</template>
<script>
export default {
  name: 'ProgressDialog',
  data() {
    return {
      progressNum: 0,
      showDownloadProgress: false,
      title: '文件预下载',
      fileItem: {}
    };
  },
  created() {},
  methods: {
    confirm(e){
      console.log(e);
      return e
    }
  },
};
</script>
<style scoped>
  .progress-item {
    padding: 20px;
  }
</style>

3、定义index.js文件

import Vue from 'vue';
import Dialog from './index.vue';

const DialogConstructor = Vue.extend(Dialog); //注册实例

export const ProgressDialog = (options,methods = {}) => {
  // new 一个实例
  const instance = new DialogConstructor(
    {
    data: options,// 存放数据
    methods //存放方法
  }
  ).$mount();//将实例进行挂载
  document.body.appendChild(instance.$el);
}

4、在main.js中引用

import { ProgressDialog } from './components/progressDialog/index';
// 调用弹框
Vue.prototype.$progressDialog = ProgressDialog

5、调用

// 组件中调用
this.$progressDialog({showDownloadProgress:true,title: '下载进度',fileItem: item}, {
     confirm(e) {
        console.log('confirm',e);
      }
   });
// js调用
ProgressDialog({showDownloadProgress:true,title: '文件预下载',fileItem: {}}, {
        confirm(e) {
          console.log('confirm',e);
        }
      });

6、效果如下