vue3中组件传值的方法


第一种: props和 emit


父组件里面子组件标签
在这里插入图片描述
子组件接收,props setup函数接收参数,使用ref来转化为响应式数据 使用emit来触发父组件事件,携带参数
在这里插入图片描述
在这里插入图片描述


setup语法实现父向子传值


父组件里面子组件 标签内部还是 一样,不一样都是 子组件内部引入 defineProps ( { 值 })
就是props的值
在这里插入图片描述


第三种: provide和inject 实现后代组件传值


父组件内部使用> provide ( "变量名" ,值 ) 这个值要包在setup函数内部 同时引入provide这个方法

在这里插入图片描述

子组件内部,引入inject 方法 const m=inject(' 变量名')
在这里插入图片描述


第四种: v-model 以及动态属性绑定


v-model 这种是默认写法 子组件传入的值是value vue2中 但是有时候value可能重名 就需要动态绑定数据
在父组件的子组件标签内部 ,: 属性名=“父组件的属性名”
在这里插入图片描述

如果是 v-model 可以再 model里面修改名字
如果是 动态绑定数据 就需要 props来接收

可以再子组件修改 父组件父数据 因为数据是动态的 固定写法
在这里插入图片描述

在vue3中 v-model 默认值就是 modelValue

  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3,子孙组件之间传值可以使用provide和inject来实现。在父组件使用provide提供数据,子组件使用inject接收数据。 在给子组件传值的例子,父组件提供了两个数据sonDate和childDate,分别是"子组件数据"和"孙组件数据"。在父组件的template,使用son-com标签引入了子组件sonCom。在子组件sonCom的template,使用button标签绑定了一个点击事件getGrandFatherData,并在点击事件调用了getGrandFatherData方法。在getGrandFatherData方法,使用inject接收了父组件的方法fun1和数据data1,并进行了调用和打印。这样就实现了子组件获取祖父组件的数据。 在孙组件grandChildCom,使用inject接收了父组件传递的childDate数据,并在template展示了该数据。 总结起来,父组件通过provide提供数据,子组件通过inject接收数据,实现了子孙组件之间的传值。 #### 引用[.reference_title] - *1* [VUE3祖孙组件传值调用方法](https://blog.csdn.net/qq_37656005/article/details/127448616)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [vue父组件给子孙组件传值(provide && inject)](https://blog.csdn.net/weixin_41227874/article/details/121373930)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值