vue中父子之间如何传值,vue3.0父子组件传值
本文主要介绍如何基于Vue解决父子价值传递问题，有很好的参考价值，希望对大家有所帮助。来和边肖一起看看吧。
目录
亲子：1。在父组件的子组件标签上传递：传递给子组件的数据名称=要传递的数据；2.子组件仍然通过props接收，并且子组件被传递给模板：summary中的父组件。
父传子：
1、 在父组件的子组件标签上通过 :传递到子组件的数据名="需要传递的数据"
在这里，我将父组件中的数据定义为：fatherData，
子组件要接收的数据被定义为sonData。
//父组件
模板
div class="关于"
{ {父数据}}
！世代相传
！-1.传递父组件的子组件标签:传递给子组件的数据的名称=要传递的数据-
儿童：sonData= father data /儿童
/div
/模板
脚本
从 @/components/children 导入子项
从“vue”导入{ defineComponent，reactive，tore fs }；
导出默认定义组件({
组件：{
孩子们，
},
名称：“关于”，
setup(){
恒定状态=反应({
父亲数据：“你好”
})
返回{
.toRefs(州)
}
}
})
/脚本
2、子组件依旧通过 props 来接收并且在模版中使用
然后，在大多数情况下，从父组件传递到子组件的数据会被用来做一些特定的功能或者根据这些数据请求数据，等等。
在设置钩子中，第一个参数props可以访问父组件传递的数据，所以在函数中，数据也是由：props操作的。父组件传递的数据的名称。
setup函数接收props作为它的第一个参数，props对象是有响应的(单向父子)。watchEffect或watch会观察并响应道具的更新。不要解构道具物件，会失去反应性。在开发过程中，道具对象对于用户空间代码是不可变的，当用户试图修改道具时会触发警告。
//子组件
模板
div class=儿童
！-3.在子组件模板中使用-
{{sonData}}
/div
/模板
脚本
导出默认值{
姓名：孩子，
//2，通过道具接收子组件
道具：[sonData]，
设置(道具){
函数childrenbut(){
//props.sonData可以访问父组件传递的数据。
console . log(props . sondata)；
}
返回{
儿童但是
}
}
}
/脚本
子传父：
1.子组件的触发事件通过setup的第二个参数context.emit从子组件传递到父组件
context上下文对象。
//子组件
模板
div class=儿童
{{sonData}}
！-1，触发事件-
Button @ click= childrenbutton 子组件按钮/按钮
/div
/模板
脚本
导出默认值{
姓名：孩子，
设置(道具、上下文){
函数childrenbut(){
console.log(上下文)；
//2.通过context.emit从子代传递到父代
//第一个参数是方法名，第二个参数是要传递的数据。
context.emit(change ， world )
}
返回{
儿童但是，
}
}
}
/脚本
context也可以使用结构的形式这样写
//子组件
脚本
导出默认值{
姓名：孩子，
//在传递结构后直接写入emit {emit}
设置(道具，{emit}){
函数childrenbut(){
//省略context.emit
发出(变化，世界)
}
返回{
儿童但是，
}
}
}
/脚本
总结
在vue3中，无论是世代相传还是从儿子到父亲，都和vue2差不多。
大部分思路都是一样的，不同的是vue3需要调用各种钩子来实现参数传递。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。