在做后台管理系统的时候,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, //展示弹窗
}
}
)