爷孙之间的相互通讯

最新推荐文章于 2023-04-02 11:33:45 发布
最新推荐文章于 2023-04-02 11:33:45 发布
阅读量234 收藏
点赞数 5
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_xiaoxuboke/article/details/125490094
版权

1. 利用$attrs实现爷传孙组件间的数据传递

首先有father(爷爷)，childDom(爸爸)，childsonDom(孙子)三个组件

在father(爷爷)组件中传入两个数据foo，coo

 然后在childDom(爸爸)组件中添加v-bind="$attrs"，相当用来连接爷爷传给孙子数据的桥梁

 最后在childsonDom(孙子)组件中接收。

 效果如图

2. 利用$listeners实现孙传爷组件间的数据传递

首先在childsonDom(孙子)组件中用$emit传递一个数据"upRocket"

 然后在childDom(爸爸)组件中也添加一个桥梁，而这个桥梁是v-on="$listeners"

 最后在father(爷爷)组件中接收

 然后就可以实现孙子组件发射火箭到爷爷组件中接收火箭了，效果如图

 

我心向阳.
关注
  • 5
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
爷孙组件直接消息传递-$attrs
12-25
爷孙组件直接消息传递-$attrs
Vue 之孙组件向爷组件通信的实现
01-19
如何把孙组件内特定的数据传给爷组件？ 例如 把孙组件的名字传给爷组件并在爷组件上显示 思路 在孙组件被点击后 emit 事件 1 和孙组件的名字 在父组件上监听孙组件 emit 出的事件 1，再次 emit 事件 2 在爷组件上监听父组件 emit 出的事件 2，并触发处理函数 这个处理函数将父组件传出的子组件名字显示在父组件上 <!DOCTYPE html> <html lang=en dir=ltr> <head> <meta charset=utf-8> <title></title> <script src=https://cdn.jsd
vue组建通信，包含父子组建、跨级（爷孙）通信、兄弟组件（类似于观察者模式）通信
qq_23864401的博客
07-21 578
<div id="app"> <h1>下面的父子通信,主要组件定义的顺序不能换</h1> <parent></parent> <h1>下面的兄弟组件通信，</h1> <up></up> <down></down> </div> ...
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
11-20
vue中我们常常用到组件. 那么组件总体可以分为如下的几种关系. 父子组件, 爷孙组件, 兄弟组件. 这几种组件之间是如何通信的呢? 父子组件通信 根据vue中的文档可知, 组件的props属性用于接收父组件传递的信息. 而子组件想要向父组件传递信息, 可以使用$emit事件. 我们定义两个组件, 一个为父组件名为father, 另外一个为子组件child. 子组件通过props属性接收父组件传递的值, 这个值为fname, 是父组件的名字. 点击子组件的按钮, 触发toFather事件, 向父组件传递消息. 父组件做出相应的反应. 将父组件和子组件放入名为app的vue实例中 Vue.co
React 爷孙组件之间相互通信
kzj0916的博客
04-04 2314
前言 最近在学习React，给大家总结下跨组件通信中，爷孙组件之间怎么相互通信。简单明了上代码直接一把梭，不多解释。 爷孙组件间通信 案例如下 代码 //跨组件通信 import React, { Component } from 'react' //创建context 给初始值 const UserMessage = React.createContext({ nickName: 'yyy', level: 1 }) export default class TextSingal e
vue3中的组件通信【2】《爷孙组件通信》
NolanKy 的 技术博客
02-25 5669
文章目录爷孙组件通信provide / inject响应性数据的传递与接收 爷孙组件通信 顾名思义，爷孙组件是比 父子组件通信 要更深层次的引用关系（也有称之为 “隔代组件”）： Grandfather.vue └─Son.vue └─Grandson.vue 方案 因为上下级的关系的一致性，爷孙组件通信的方案也适用于 父子组件通信 ，只需要把爷孙关系换成父子关系即可。 provide / inject Grandfather.vue 有一个 provide 选项来提供数据，Grandson.v
react（六）跨(爷孙)组件通信 context
陈小陈的博客
08-18 509
跨组件通信 context React.createContext(defaultValue); { Consumer, Provider } = createContext(defaultValue) Context.Provider 在父组件调用 Provider 传递数据 value 要传递的数据 接收数据 class.contextType = Context; static contextType = Context; this.context; Context.Consumer&
初中语文文摘情感爷孙俩
09-09
初中语文文摘情感爷孙俩
vue组件隔代通信(爷爷组件与孙子组件通信)
weixin_41223530的博客
12-07 1万+
参考:https://blog.csdn.net/qq_39009348/article/details/81977468 1.方法:$attrs和$listeners两个属性 看了官方文档对这两个属性的解释有点抽象,简单的的说$attrs属性可以可以获取顶层组件(爷爷组件)的值(这里的数据是data定义的,而props不可以);$listeners属性相当于顶层组件(爷爷组件)事件监听器 首先我定义三个组件 YEYE.vue BABA.vue SUNZI.vue 最终效果 2.将爷爷组件的值传给孙子
vue3 组件间互相通信（包括父子、爷孙、兄弟、全局）
热门推荐
技术前端，忠于热爱 @回忆哆啦没有A梦
04-11 2万+
vue3 组件间通信方式（包括父子、爷孙、兄弟、全局），最全面的组件通信方式。
Vue父子组件如何通信（6种）
M_Jin的博客
03-12 215
父传子用props，子传父用$on、$emit（发布订阅）；
vue爷孙组件传值之$attrs
weixin_45393280的博客
12-12 1489
在vue组件传值中，父组件向子组件传值可以使用props进行传递，但是如果爷爷组件向孙子组件传递如何操作？这里使用的是$attrs 首先定义三个组件，app（爷爷组件），father（父组件），son（孙子组件） 我们要达到的目的是，爷爷组件向孙子组件传递一个数组list 然后在爷爷组件中 在父组件中使用v-bind 最后在孙子组件中接收数据 这样就完成了祖孙组件的传值 ...
vue中实例属性--$attrs,$listeners
Kratial的博客
09-27 1109
组件的嵌套关系如下： grandpa>father>son 1.vm.$attrs: 使用场景：孙子组件想要拿到爷爷组件的信息且不借助于于vuex的情况下可以利用此来实现 (1)描述： vm.$attrs 在子组件不通过props取数据的情况下： 1.通过this.$attrs可以拿到父组件传递过来的所有数据， 2.孙子组件上添加v-bind="$attrs",那么孙子组件中就可以访问到爷爷组件传递给爸爸组件，以及爸爸组件传给儿子组件的所有数据, 通过props接收的数据项无法在$attrs中
爷孙组件传递数据
coco_2233的博客
04-02 385
对于父子组件的传递数据，可以通过prop进行传递，但是如果是爷爷向孙子传递数据呢？我们需要在爸爸中定义defineProps拿到爷爷传来的数据，然后在孙子中也定义defineProps，爸爸把刚刚拿到的数据在传递给孙子。对于爸爸来说根本用不到这些数据，只是孙子要用到。那有没有一种方法让爷爷直接传递数据给孙子呢？答案肯定是有的，这里说的是依赖注入的方法，还有一种使用vuex的方法以后再说吧。
vue组件通信
qq_46376192的博客
12-31 2644
vue组件通信
组件通信、传值（父子、爷孙、多层级）（prop、$emit、provide、inject）（vue）
weixin_61285710的博客
01-13 1217
组件之间的通信无非三种：兄弟组件间、父子组件间、爷孙（多层级间） 父传子：prop、子传父：$emit、多层级：provide 和 inject。兄弟：vue-bus
Vue祖先组件向子孙组件通信（provide / inject）
qq_26320465的博客
07-27 2271
Vue祖先组件向子孙组件通信（provide / inject） 说明：这对选项需要一起使用，允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深（这也是通过props传值不好实现的地方），并在起上下游关系成立的时间里始终生效。 提示：provide和inject绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。 demo...
vue爷孙组件之间传值
最新发布
08-26
在Vue中，爷孙组件之间的数据传递是通过props和$emit来实现的。爷孙组件之间不能直接通信，需要通过父组件作为中间组件传递数据。具体实现步骤如下： 1. 在祖父组件（GrandFather.vue）中，定义要传递的数据msg1和...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值