vue3 setup 父传子，子传父 我们需要绑定一个值，这个值是子组件那边的（generateData），而sonComponentValue这个变量就是父组件要给子组件传的值，父组件这边要写就那么多。子组件这边就要用到我们的setup去接收父组件传过来的值。vue3 setup父子传值。举例：父组件： 子组件。
发布于2023-03-17 07:02 阅读(962) 评论(0) 点赞(23) 收藏(1)
vue3父子组件传值
vue3 setup父子传值
- 父组件把值传给子组件
举例：父组件： 子组件
父组件给子组件传值：
<FatherComponent/>
<son-component :generateData="sonComponentValue"/>
我们需要绑定一个值，这个值是子组件那边的（generateData），而sonComponentValue这个变量就是父组件要给子组件传的值，父组件这边要写就那么多
<SonComponent/>
子组件这边就要用到我们的setup去接收父组件传过来的值
export default {
name: "sonComponent",
props: ['generateData'],
setup(props) {
let data = props.generateData;
console.log(props.generateData)
return {data};// 返回data外部就可以调用data了，注意：setup中不能使用this因为setup在create生命周期之前
},
data() {
return {
}
},
methods:{
}
}
</script>
这里注意如果你想要把data 变成一个响应式数据就需要使用到vue3中的reacitive与ref Api
reacitive：用来包装数据结构复杂的数据
ref：用来包装数据结构简单的数据
如果你觉得setup这种写法很麻烦，你也可以去百度setup语法糖会比这个写法更加简洁和方便
- 子组件把值传给父组件
上面我们用的setup这种是单向传输的方法，所以如果我们需要把值传回父组件，在子组件中我们需要用到**this.$emit()**方法，在父组件中我们需要用到v-on（@）事件监听器
<FatherComponent/>
<transfer-component :generateData="sonComponentValue" @callBackMethod="callBackSonComponentMethode"/>
callBackSonComponentMethode(resultValue) {
console.log("callBackSonComponentMethode", resultValue)
},
<SonComponent/>
sendEmits(){
// this.$emit 的第一个参数是父组件那边事件监听器的名字，第二参数是你要传输的对象
this.$emit("callBackMethod", "这是子组件的返回值")
}```
所属网站分类: 技术文章 > 博客
作者：代码搬运工
链接：http://www.qianduanheidong.com/blog/article/505494/b93e8da0adacfc762813/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力