vue2的孙子传值给爷爷，爷爷传值给孙子

于 2024-03-29 17:00:45 发布
阅读量523 收藏 11
点赞数 4
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51140082/article/details/137150329
版权

孙---->爷

在爷爷组件，给父亲组件绑定一个方法
在这里插入图片描述

定义一个方法用来接受传来的值
在这里插入图片描述

在父亲组件中

给孙子组件绑定v-on=“$listeners”
在这里插入图片描述

在孙子组件

在特定掉件触发下，将值穿过去，注意：这里的this.$emit的名字要跟爷爷绑定的一致

在这里插入图片描述

最终结果，在孙子组件的输入框输入内容然后失去焦点，触发方法传值给爷爷。让爷爷拿到值来智能识别渲染列表

在这里插入图片描述

爷—>孙

用是provude,inject

在爷爷中

在爷爷中定义方法
在这里插入图片描述

在这里插入图片描述

在孙子中使用

在这里插入图片描述

调用

在这里插入图片描述

1.也可以一层一层的传下去，爷爷—>父亲—>孙子，孙子—>父亲—>爷爷
2.this. p a r a n t . parant. parant.parant,this. c h i l d r e n . children. children.children
3.vuex
4.浏览器缓存
等等

摸鱼少侠梁先生
关注
  • 4
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3、Vue2中的爷爷与祖孙之间的传值
Wancc123的博客
04-20 8570
1.父传孙数据:provide 2.子孙得到数据:inject 父传孙子 import { ref, provide } from 'vue' setup() { // 直接把数据传递出去给孙子传 provide('sendInfo', 1000) }
vue爷孙组件如何互相传值
weixin_50249353的博客
04-14 993
vue爷孙组件如何互相传值
在Vue中，向上通信（从孙子到爷爷）的常用方法有以下几种：
涂涂
05-11 3241
访问根组件，再使用深度优先搜索遍历其子孙组件，找到爷爷组件，调用其方法。注：这里提供的只是几种可能的方法，具体使用要根据实际情况选择。获取爷爷组件中的属性或方法，间接调用其方法。访问爷爷组件，调用其方法。提供一个函数或对象，让孙子组件使用。下面简单介绍这三种方法的使用。vue3.0照例只是写法改变。
Vue祖孙组件传值
peter_hzq的博客
11-08 6892
祖传孙 方法一：props 传递次序：GrandFather → Father → GrandSon 1、在 GrandFather 中给 Father 传递了一条消息。 GrandFather.vue <template> <div class="parent"> ????爷爷 <Father :msg1="msg1" :msg2="msg2" /> </div> </template> <script> i
爷子孙之间传值
weixin_62515884的博客
03-03 1041
爷子孙之间传值有四种情况： 1.爷传孙 2.孙传爷 3.父传子 4.子传父 首先要创建好三个个组件，爷组件，父组件，孙组件： 爷组件： <template> <div> <div class="yeye">我是爷爷组件 </div> <router-view></router-view> </div> </template> <script> // export..
vue父组件给子组件传值
12-21
vue父组件给子组件传值
解决Vue中 父子传值 数据丢失问题
10-16
主要介绍了解决Vue中 父子传值 数据丢失问题,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
VUE兄弟组件传值操作实例分析
10-16
主要介绍了VUE兄弟组件传值操作,结合实例形式分析了VUE兄弟组件传值操作的原理、步骤、实现方法及相关注意事项,需要的朋友可以参考下
vue props传值失败 输出undefined的解决方法
10-18
今天小编就为大家分享一篇vue props传值失败 输出undefined的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue 组件间传值及事件触发Demo
09-07
Vue 组件间传值及事件回调
Vue 之孙组件向爷组件通信的实现
10-17
主要介绍了Vue 之孙组件向爷组件通信的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue祖孙组件间传值
02-07 1389
vue祖孙组件间传值
vue 孙组件给爷组件传递数据,本质层层传递
最新发布
tenc1239的博客
08-26 1554
Child,},methods: {// 必须在中间组件 定义事件// 在这里处理数据
爷孙子组件传值
m0_49529959的博客
06-01 2191
爷孙组件传值
Vue2 组件通信、组件间传值的几种方式(分享)
weixin_60547084的博客
04-26 3333
文件间的关系 App 为根组件 Father 与 Brother 为兄弟组件，也同为 App 的子组件 Child 是 Father 的子组件，也是 App 的孙组件 2. 父子之间传值 2.1 props，父传子 // Father.vue 文件 import Child from "./Child.vue"; export
vue 爷孙组件通信传值v-bind=“$attrs“ v-on=“$listeners“
jieweiwujie的博客
10-17 1016
1 爷爷组件写法 <father2 :position="position" @sunYe='sunYe'></father2> <template> <div class="pluginAlertName"> <el-button type="" @click="FClick">爷爷给孙子发消息</el-button> 这是爷爷的页面：name:{{name}}--age:{{age}} .
vue2的组件传参方式
weixin_46846007的博客
06-05 641
vue2的组件传参方式
Vue组件间通信方式超详细(父传子、父传后代、子传父、后代传父、兄弟组件传值)
qq_41497443的博客
02-28 7421
Vue组件间通信方式超详细(父传子、父传后代、子传父、后代传父、兄弟组件传值)
vue2 孙子给爷爷传值
07-28
在Vue2中，孙子组件给爷爷组件传值可以通过以下步骤实现： 1. 在孙子组件中，使用props属性接收来自爷爷组件的值。在GrandSon.vue文件中，可以看到props中定义了一个名为msg2的属性，用于接收来自GrandFather组件的消息。 2. 在爷爷组件中，通过在模板中使用子组件的标签，并通过属性绑定的方式将需要传递的值传递给子组件。在GrandFather.vue文件中，可以看到在爷爷组件的模板中使用了Father组件，并通过属性绑定的方式将msg2的值传递给Father组件。 3. 在父组件中，通过props属性接收来自爷爷组件的值，并在需要的地方使用。在Father.vue文件中，可以看到props中定义了一个名为msg2的属性，用于接收来自GrandFather组件的消息。在模板中，可以使用这个值进行相应的操作。 综上所述，通过在孙子组件中使用props属性接收来自爷爷组件的值，并在爷爷组件中通过属性绑定的方式将值传递给孙子组件，就可以实现孙子给爷爷传值的功能。 #### 引用[.reference_title] - *1* *2* [Vue祖孙组件怎么传值](https://blog.csdn.net/qq_40738077/article/details/106765455)[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] - *3* [Vue祖孙组件传值](https://blog.csdn.net/peter_hzq/article/details/121216683)[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、付费专栏及课程。

余额充值