vue弹窗组件的使用(传值),以及弹窗只能触发一次的问题

import BusinessDialog from '../../components/BusinessDialog'
export default {
  components: {
    BusinessDialog
  },
  data() {
    return {
      dialog:false;
    };
  },

 <business-dialog :dialog.sync="dialog"></business-dialog>
 //这里的dialog就是要传递给子组件的值,默认是false(不弹出)

openDialog() {
      this.dialog = true
    },
    //在父组件中点击编辑按钮,触发弹窗

export default {
//子组件通过props接收父组件传递过来的值 dialog控制弹窗的弹出及隐藏
  props: {
    dialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
    };
  },
  methods: {
    checkDate(val) {},
    //解决弹窗只能弹一次的问题(点击确定和取消按钮的时候,给dialog做一个重新赋值)
    confirm() {
      this.$emit("update:dialog", false);
    },
    cancle() {
      this.$emit("update:dialog", false);
    },
    //子组件传值给父组件(onChange是传递给父组件的事件名, true是传递给父组件的值)
    this.$emit('onChange',true)
  },
};

<business-dialog :dialog.sync="dialog" @onChange="getData"></business-dialog>
methods:{
getData(val) {
    //这个val就是接收到的子组件传递过来的值啦~~~~
    }
}

this.alertWbs();   // 打开上面的弹窗

import Vue from 'vue';
import wbs from './wbs';                // 子组件
const Wbs = Vue.extend(wbs);
var instance = null;                     // 这里做一个处理，只需要一个实例
export function alertWbs(){
    if(!instance){
        instance = new Wbs();
        instance.$mount();
        document.body.appendChild(instance.$el);
    }
    instance.projectAreaDialog = true;      // 控制子组件自己的显示
}

this.alertWbs().then(res=>{
  console.log(res);    // 此时传过来的res应该就是子组件中选择的数据了
})

import Vue from 'vue';
import wbs from './wbs';
const Wbs = Vue.extend(wbs);
var instance = null;
export function alertWbs(){
    if(!instance){
        instance = new Wbs();
        instance.$mount();
        document.body.appendChild(instance.$el);
    }
    instance.projectAreaDialog = true;
    return new Promise((resolve,reject)=>{
        instance.promise = {       //  将promise挂载到子组件实例上，因为目前为止，谁也不知道什么时候resolve数据
            resolve,reject
        }
    })
}

choose(value){
   this.promise.resolve(value);            //  向父组件传值
   this.projectAreaDialog = false;       // 改变自己的状态，隐藏
}

this.alertWbs(params).then(res=>{
  console.log(res);    // 此时传过来的res应该就是子组件中选择的数据了
})

import Vue from 'vue';
import wbs from './wbs';
const Wbs = Vue.extend(wbs);
var instance = null;
export function alertWbs(params){
    if(!instance){
        instance = new Wbs();
        instance.$mount();
        document.body.appendChild(instance.$el);
    }
    instance.projectAreaDialog = true;
    instance.params = params;   // 直接放在子组件的实例上
    return new Promise((resolve,reject)=>{
        instance.promise = {       //  将promise挂载到子组件实例上，因为目前为止，谁也不知道什么时候resolve数据
            resolve,reject
        }
    })
}

import Vue from 'vue';
import wbs from './wbs';
const Wbs = Vue.extend(wbs);
var instance = null;
export function alertWbs(){
    if(!instance){
        instance = new Wbs();
        instance.$mount();
        document.body.appendChild(instance.$el);
    }
    instance.projectAreaDialog = true;
    // init方法获取页面数据
    instance.init();
    return new Promise((resolve,reject)=>{
        instance.promise = {
            resolve,reject
        }
    })
}