Vue3父子组件互调方法的实现

目录

• 一、父组件调用子组件方法
• 1、子组件
• 2、父组件
• 3、测试结果
• 4、关于 defineExpose 的官方文档
• 二、子组件调用父组件方法
• 1、子组件
• 2、父组件
• 3、测试结果
• 4、关于 defineEmits 的官方文档

下面演示均为使用 setup 语法糖的情况！

一、父组件调用子组件方法

下面演示为使用 setup 语法糖的情况，值得注意的是子组件需要使用 defineExpose 对外暴露方法，父组件才可以调用！

1、子组件

2、父组件

3、测试结果

4、关于 defineExpose 的官方文档

网址：https://v3.cn.vuejs.org/api/sfc-script-setup.html#defineexpose

defineExpose

使用

当父组件通过模板 ref 的方式获取到当前组件的实例，获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包)。

二、子组件调用父组件方法

1、子组件

2、父组件

3、测试结果

4、关于 defineEmits 的官方文档

网址：https://v3.cn.vuejs.org/api/sfc-script-setup.html#defineprops-和-defineemits

defineProps 和 defineEmits

在

• defineProps 和 defineEmits 都是只在