vue3父组件调用子组件方法,vue中父子组件如何相互调用方法
本文主要介绍了Vue3的亲子组件互调方法的实现，并通过实例代码进行了详细介绍。对大家的学习或工作都有一定的参考价值。有需要的朋友下面跟边肖学习。
目录
一、父组件调用子组件方法1、子组件2、父组件3、测试结果4、关于defineExpose的官方文档二。子组件调用父组件方法1、子组件2、父组件3、测试结果4和关于定义排放的官方文件。下面的演示都是使用setup语法sugar的情况！
一、父组件调用子组件方法
下面是使用setup语法sugar的演示。值得注意的是，子组件需要使用defineExpose方法，父组件才能调用！
1、子组件
模板
/模板
脚本安装语言=ts
//第一步：定义子组件内部的方法。
const doSth=(str: string)={
Console.log(执行子组件的doSth方法！str)；
}
//第二步：曝光方法
defineExpose({ doSth })
/脚本
样式范围
/风格
2、父组件
模板
Button @click=getChild 触发器子组件方法/按钮
！-步骤1:定义ref -
HelloWorld ref=childRef /
/模板
脚本安装语言=ts
//一、导入
从“vue”导入{ ref }；
从导入HelloWorld。/components/hello world . vue ；
//二。数据
//第二步：定义一个与ref同名的变量
const child ref=ref any()；
//三。功能
const getChild=()={
//步骤3:调用子组件的方法或变量，并传递值
ChildRef.value.doSth(只传递值！);
}
/脚本
风格
/风格
3、测试结果
4、关于 defineExpose 的官方文档
网站：https://v3.cn.vuejs.org/api/sfc-script-setup.html#defineexpose
定义展示
使用脚本设置的组件是默认关闭，也就是说，通过template ref或$parent chain获得的组件的公共实例不会公开脚本设置中声明的任何绑定。
要指定要在脚本设置组件中公开的属性，请使用defineExpose编译器宏：
脚本设置
从“vue”导入{ ref }
常数a=1
常数b=ref(2)
defineExpose({
一，
b
})
/脚本
当父组件通过模板ref获取当前组件的实例时，获取的实例会是这样的{a: number，b: number} (ref会像普通实例一样自动解包)。
二、子组件调用父组件方法
1、子组件
模板
/模板
脚本安装语言=ts
从“@vue/runtime-core”导入{ on mounted }；
const emit=define emits([ doSth ])；
const doSth=()={
emit( doth )；
}
onMounted(()={
doSth()；
});
/脚本
样式范围
/风格
2、父组件
模板
！-第一步：用@do-sth或@doSth接受方法-
HelloWorld @doSth=sayHello /
/模板
脚本安装语言=ts
//一、导入
从导入HelloWorld。/components/hello world . vue ；
//二。功能
//第二步：自定义方法
const sayHello=()={
console.log(hello world！);
}
/脚本
风格
/风格
3、测试结果
4、关于 defineEmits 的官方文档
网站：https://v3.cn.vuejs.org/api/sfc-script-setup.html#defineprops-和-define MITS
定义方案和定义限制
在脚本设置中，您必须使用defineProps和define emissions来声明Props和emissions，它们具有完整的类型推断，并可在脚本设置中直接使用：
脚本设置
const props=defineProps({
字符串
})
const emit=defineEmits([change ， delete])
//设置代码
/脚本
DefineProps和defineEmits是只能在脚本设置中使用的编译器宏。它们不需要被导入，将随着脚本设置过程被编译。DefineProps接收与Props选项相同的值，defineEmits也接收与emits选项相同的值。在选项传入后，DefineProps和defineEmits将提供适当的类型推断。传递给defineProps和defineEmits的选项将从安装程序提升到模块范围。因此，传入的选项不能引用setup作用域中声明的局部变量。这样做会导致编译错误。但是，它可以引用导入的绑定，因为它们也在模块的范围内。如果使用Typescript，也可以使用纯类型声明来声明prop和emissions。
关于Vue3亲子模块互调方法实现的这篇文章到此为止。更多相关Vue3亲子模块互调内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。