自由空间网站建设,寓意好有内涵的公司名字,定制化开发,网络运维工程师和网络工程师在做后台管理系统的时候#xff0c;dialog组件是我们使用频率比较高的组件#xff0c;但是有一些需求现有的组件是不满足的。因此会需要我们做二次封装。 组件本身的属性我们保留#xff0c;只需要根据需求添加#xff0c;然后在使用的时候props去拿取使用就可以了。 本次遇…在做后台管理系统的时候dialog组件是我们使用频率比较高的组件但是有一些需求现有的组件是不满足的。因此会需要我们做二次封装。 组件本身的属性我们保留只需要根据需求添加然后在使用的时候props去拿取使用就可以了。 本次遇到的问题是如何在父组件去控制dialog的展示关闭。之前有尝试过使用watch去监听props的值是可以做到想到的效果但是代码稍微有一些冗余。 这次试试新的写法由于props是单向数据流所以这里选择使用computed在父组件改变值的时候对应的dialog就会相应的改变状态。剩下的就是在dialog关闭的时候需要通知父组件状态的变化。如下
templatedivel-dialog:visible.syncshowDialog123/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.syncshowReviewDialog /import reviewDialog from ../components/reviewDialogcomponents: {reviewDialog},data() {return {showReviewDialog: false, //展示弹窗}})
