vue父组件和子组件传值,vue父组件向孙子组件传值
本文主要介绍vue的亲子组件的价值传递，有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
vue3诞生已经很久了，笔者也是最近才开始学习vue3的。与vue2相比，vue3在写法上有了很大的改变。最典型的例子就是vue3通过ref或者reactive实现数据的响应。因为ref和reactive的出现，vue3中父子组件的值传递方式也发生了变化。
我们先来看看vue2里的写法。
父组件：
！-父组件-
模板
差异
儿童：title= title @ get children= get children /儿童
一个div子组件表示：{{{ childrenAsk }}/div
/div
/模板
脚本
从导入孩子。/children.vue
导出默认值{
data() {
返回{
标题：“我是父组件传递的值”，
儿童提问：“”
}
},
方法：{
getChildren(val) {
this.childrenAsk=val
}
}
}
/脚本
子组件：
！-子组件-
模板
差异
div组件传递的值：{{ title }}/div
按钮@ click= askfather 单击发送到父组件/按钮
/div
/模板
脚本
导出默认值{
道具：{
标题：{
类型：字符串
}
},
data() {
返回{
AskMsg:“这是我对父组件说的话”
}
},
方法：{
askToFather() {
这个。$emit(getChildren ，this.askMsg)
}
}
}
/脚本
在vue2中，子组件到父组件的值传递就是这样实现的。$emit，但是在vue3中，这是不存在的。vue3封装了setup中的数据和功能，那么vue3是如何实现的呢？
我们知道vue3中的setup接收两个参数。第一个参数是props，即父组件传递给子组件的props值，第二个值是context，表示当前的context对象。知道这个东西之后，我们现在就来体会vue3的亲子组件的价值传递。
vue3中的父对子和vue2中的父对子是一样的，就不再过多阐述了。下面重点介绍vue3的儿子对父亲。
父组件
模板
Style= color: aqua 父组件/div
Div子组件对我说：{{{ children _ msg}}/div
儿童：title= msg @ listen= listen children /儿童
{{ value }}
/模板
脚本语言
从“@/views/component _ emit/children . vue”导入子项
从“vue”导入{ defineComponent，ref }
导出默认定义组件({
组件：{
孩子们，
},
姓名：父亲，
setup() {
Msg=我是父组件
let children _ msg=ref()//ref的作用是实现响应，但是如果没有ref，响应就无法实现(参考带reactive的数据类型)。
let listen children=(val)={
children _ msg . value=val//ref包装的数据需要以。价值。
}
返回{
味精，
儿童_msg，
听着孩子们，
}
},
})
/脚本
款式/风格
子组件：
模板
Style= color: brown 子组件/div
！-亲子使用方法同vue2-
div组件传递的值是：{{ title }}/div。
Button @ click= sayfather 与父组件/按钮对话
/模板
脚本语言
从“vue”导入{ defineComponent }
导出默认定义组件({
姓名：孩子，
道具：{
标题：{
类型：字符串，
},
},
设置(道具、上下文){
//context的作用是获取context对象，
//如果setup写成setup(props，{emit})，可以省略下面的上下文。
const sayToFather=()={
Const ask=我是子组件，我和父组件说话
context.emit(listen ，ask)
}
返回{
对父亲说，
}
},
})
/脚本
款式/风格
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。