vue3 el-dialog 作为子组件父级控制其显示隐藏
vue3el-dialog 子组件弹窗父组件控制显隐
·
父组件里 引入子组件
<div class="add-box" @click="dialogInfo.isShow = true"></div> // 点击事件弹窗显示
<ClaDialog :dialogVisible='dialogInfo.isShow' @changeVi="changeVi"></ClaDialog>
// dialogInfo 来控制显示隐藏
const dialogInfo = reactive({
isShow: false,
})
// 监听显示隐藏状态改变
watch(() => dialogInfo.isShow, (val) => {
// console.log("父组件监听flag:", val)
})
// 接收子组件传过来的事件
const changeVi = (val: any) => {
dialogInfo.isShow = false
}
子组件里
<el-dialog v-model="props.dialogVisible" title="新增标准" custom-class="dialog-clas" width='1060px' @close="closeDialog">
// props 接收父组件传过来的
const props = defineProps({
dialogVisible: Object
})
// 监听状态改变
watch(() => props.dialogVisible, (val) => {
// console.log(val,'vallll')
// dialogVisible.value = val
})
// 弹窗关闭的时候 传状态给父组件
const emit = defineEmits(['changeVi'])
const closeDialog = () => {
emit("changeVi", false)
}
更多推荐
已为社区贡献7条内容
所有评论(0)