Vue3 子父组件间通讯
2023-03-24 01:34:42 0 举报
登录查看完整内容
父子组件间的相互通讯，环境：Vue3 Composition API TypeScript 版本， 场景示例：Modal 模态框的弹出与隐藏
作者其他创作
大纲/内容
子组件
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 按钮
引用子组件
0 条评论
回复 删除
下一页
