iview 如何跨组件控制和同步 Modal 的显示隐藏

开发中经常遇到的情况，假如页面需要弹出一个模态框，这个框里的内容也比较多，那么很自然地会考虑把模态框及其中的内容抽成单个组件，再由页面去引用并控制它的显示隐藏。

那么，在中间多出一层封装的情况下，如何同步控制模态框的显示隐藏状态呢？

外层页面组件

<PriceInfodModal v-model="modalShow" />

data(){
    return {
        modalShow: false    // 控制且同步模态框显示隐藏的变量
    }
}

 

中间组件，对iview modal 和其内容进行封装

// template 部分
// 这里引用 iview 的 modal
<Modal
  v-on="$listeners"
  :value="value"
>
   <div>...内容...</div>
</Modal>

// js 部分
export default {
  model: {
    prop: 'value',
    event: 'on-visible-change',
  },
  props: {
    value: {
      type: Boolean,
    },
  },
}


// 如果使用了框架 vue-property-decorator ，就换成以下写法
@Model('on-visible-change', Boolean)
value: boolean