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

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

父级页面：

?

1 2 3 4 5 6 7

<PriceInfodModal v-model="modalShow" />    data(){     return {         modalShow: false    // 控制且同步模态框显示隐藏的变量     } }

 子组件：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// 这里引用 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” 实践后确实好用。

资源丰富的的网盘资源：网盘资源大全！ 推荐一个适合零基础学习SQL的网站：不用安装数据库，在线轻松学习SQL！