element dialog 封装到子组件中( .sync修饰符与$emit(update:xxx))
原理:https://blog.csdn.net/weixin_46995731/article/details/109765940
1、父组件调用
// .async: 对prop进行“双向绑定
<Dialog :visible.sync="dialogVisibleDemo" />
2、子组件
<template> <div class="dialog"> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" @close="handleClose"> <span>这是一段信息</span> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="dialogVisible = false">确 定</el-button> </span> </el-dialog> </div> </template> <script> export default { props: { visible: { type: Boolean, default: false, }, }, watch: { visible(value) { this.visible = value; this.dialogVisible = value; }, }, data: () => ({ dialogVisible: false, }), methods: { handleClose() { // 改父组件通过props传递过来的变量 this.$emit('update:visible', false); }, }, }; </script>