子组件
v-model:visible=\"visible\"
@click=\"openVisible\"
// 隐藏子组件const closeVisible = () => { toggle.value = false}
// DOM 监听状态span style=\"font-size: inherit;\
// 设置默认模态框状态(默认不可见)visible = ref(false)
父组件
:open=\"toggle\"
VUE3 子父组件通讯
// 设置默认子组件属性toggle = ref(false)
// DOM 监听 props.open 值的变化watch(() => props.font color=\"#323232\
@cancel=\"handleCancel\"
@close=\"closeVisible\"
定义子组件属性和方法
// 接收父组件传来的方法const emit = defineEmits(['closeVisible']);
// 接收父组件传来的值const props = defineProps<{ open: boolean }>();
// 显示子组件const openVisible = () => { toggle.value = true}
Modal 模态框
Button 按钮
引用子组件