iview 将Modal抽取成组件并控制Modal的显示隐藏

开发中遇到Modal弹出框的内容太多，就想把Modal单独分装成一个组件，但是发现封装成组件后Modal的关闭和打开有问题。如下方法可以解决这个问题。

父级页面：

<PriceInfodModal v-model="modalShow" />

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

子组件：

// 这里引用 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,
    },
  },
}

参照了博客“https://blog.csdn.net/landiyaaa/article/details/112451588” 实践后确实好用。