望城门户网站今日舆情热点

在做后台管理系统的时候，dialog组件是我们使用频率比较高的组件，但是有一些需求现有的组件是不满足的。因此会需要我们做二次封装。
组件本身的属性我们保留，只需要根据需求添加，然后在使用的时候props去拿取使用就可以了。
本次遇到的问题是如何在父组件去控制dialog的展示关闭。之前有尝试过使用watch去监听props的值，是可以做到想到的效果，但是代码稍微有一些冗余。
这次试试新的写法，由于props是单向数据流，所以这里选择使用computed，在父组件改变值的时候，对应的dialog就会相应的改变状态。剩下的就是在dialog关闭的时候，需要通知父组件状态的变化。如下：

<template><div><el-dialog:visible.sync="showDialog">123</el-dialog></div>
</template>
<script>
export default {data() {return {}},props: {visible: {type: Boolean}},computed: {showDialog: {get() {return this.visible},set(val) {console.log(val)this.$emit('update:visible', val) // visible 改变的时候通知父组件}}}
}
</script>

然后在父组件使用的时候，直接引入父组件，然后绑定值即可

<review-dialog :visible.sync="showReviewDialog" />import reviewDialog from '../components/reviewDialog'components: {reviewDialog},data() {return {showReviewDialog: false, //展示弹窗}})