vue爷孙组件传值之$attrs

最新推荐文章于 2024-03-05 11:48:29 发布
最新推荐文章于 2024-03-05 11:48:29 发布
阅读量1.4k 收藏 9
点赞数 2
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45393280/article/details/111060175
版权

在vue组件传值中，父组件向子组件传值可以使用props进行传递，但是如果爷爷组件向孙子组件传递如何操作？这里使用的是$attrs
首先定义三个组件，app（爷爷组件），father（父组件），son（孙子组件）
我们要达到的目的是，爷爷组件向孙子组件传递一个数组list
然后在爷爷组件中
在这里插入图片描述
在父组件中使用v-bind
在这里插入图片描述
最后在孙子组件中接收数据
在这里插入图片描述
最后页面效果为：
在这里插入图片描述

这样就完成了祖孙组件的传值

今天也要努力写代码
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
11-20
vue中我们常常用到组件. 那么组件总体可以分为如下的几种关系. 父子组件, 爷孙组件, 兄弟组件. 这几种组件之间是如何通信的呢? 父子组件通信 根据vue中的文档可知, 组件的props属性用于接收父组件传递的信息. 而子组件想要向父组件传递信息, 可以使用$emit事件. 我们定义两个组件, 一个为父组件名为father, 另外一个为子组件child. 子组件通过props属性接收父组件传递的值, 这个值为fname, 是父组件的名字. 点击子组件的按钮, 触发toFather事件, 向父组件传递消息. 父组件做出相应的反应. 将父组件和子组件放入名为app的vue实例中 Vue.co
vue父子组件传值，修改值
像鱼的博客
01-12 745
vue父子组件传值，修改值 父子传值，双向绑定
vue3 更全的父子（孙）组件传参
最新发布
weixin_48091030的博客
03-05 584
前段时间写过一个 vue3的父子组件传参，经过一段时间的学习，现在进行补充一些。
Vue组件通信$attrs、$listeners实现原理解析
10-14
主要介绍了Vue组件通信$attrs、$listeners实现原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue3组件之间通信(三)——爷孙组件传递属性和方法
weixin_44784401的博客
08-14 9566
爷孙组件传递属性和方法，包含setup函数和script setup 两种形式
爷孙之间的相互通讯
Mr_xiaoxuboke的博客
06-27 227
首先有father(爷爷)，childDom(爸爸)，childsonDom(孙子)三个组件在father(爷爷)组件中传入两个数据foo，coo 然后在childDom(爸爸)组件中添加v-bind="$attrs"，相当用来连接爷爷传给孙子数据的桥梁 最后在childsonDom(孙子)组件中接收。 效果如图2. 利用$listeners实现孙传爷组件间的数据传递首先在childsonDom(孙子)组件中用$emit传递一个数据"upRocket" 然后在childDom(爸爸)组件中也添加一个桥梁，而
Vue3、Vue2中的爷爷与祖孙之间的传值
Wancc123的博客
04-20 8580
1.父传孙数据:provide 2.子孙得到数据:inject 父传孙子 import { ref, provide } from 'vue' setup() { // 直接把数据传递出去给孙子传 provide('sendInfo', 1000) }
Vue3兄弟，爷孙组件间传值【包含手撸发布/订阅类】
hannah2233的博客
01-09 1159
1、 父组件通过v-model传递值给子组件时，会自动传递一个value的prop属性，在子组件中通过this.$emit(‘input’,val)自动修改v-model绑定的值。注意： 因为在setup中无法访问到应用实例（this），如果你需要在setup中使用eventBus，则需要通过provide/inject方式引入。1、 父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过$emit触发事件做到的。父组件A下面有子组件B，组件B下面有组件C，组件A传递数据给组件B。
Vue为什么要谨慎使用$attrs与$listeners
10-14
主要介绍了Vue为什么要谨慎使用$attrs与$listeners，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue 之孙组件向爷组件通信的实现
10-17
主要介绍了Vue 之孙组件向爷组件通信的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue vm.$attrs使用场景详解
10-15
主要介绍了vm.$attrs使用场景详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue3子组件可以直接修改父组件的数据了？
weixin_52444774的博客
08-11 761
然后仔细一查文档发现只有对象和数组类型的props数据可以更改。能成功，but是vue是禁止这样直接修改的，有缺点而且耗性能啥的。直接更改非对象或数组类型的props数据控制台是会报警告的，告诉你该数据是只读的。他竟然直接在子组件修改父组件传递过来的数据。而且代码实现还是成功的。所以说，咱还是乖乖自定义方法去修改props数据吧。在项目中，看到了同事的代码，一脸震惊！然后尝试重新写了个数据，发现是不成功的。吓得我以为vue3更新了。
爷孙子组件传值
m0_49529959的博客
06-01 2197
爷孙组件传值
vue3(自定义组件) prop 和 Attrs的使用方式(父子组件双向绑定)
的博客
07-05 1498
父子组件传值，props，attrs，emits，自定义组件
vue3 传值
weixin_69811594的博客
09-13 222
vue3 中各种传值方式
vue爷孙组件传值
YZ_ZZZ24的博客
07-30 5254
其实$attrs和$listeners相当于是一个中转，主要用在父亲组件上。爷组件和孙组件保持以前的使用即可！
Vue中 $attrs、$listeners 详解及使用
热门推荐
明天也要努力的博客
04-23 4万+
1. 前言 多级组件嵌套需要传递数据时，通常使用的方法是通过 vuex。如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点杀鸡用牛刀。 Vue 2.4 版本提供了另一种方法，使用 v-bind=”$attrs”, 将父组件中不被认为 props 特性绑定的属性传入子组件中，通常配合 interitAttrs 选项一起使用。之所以要提到这两个属性，是因为两者的出现使得组件之间跨组件的通信在不依赖 vuex 和 事件总线 的情况下变得简洁，业务清晰。 首先分析以下应用场景 A 组件与 B 组件
父子组件传值prop与$emit、爷爷组件与孙子组件传值
qq_45919348的博客
04-29 778
父组件传给子组件 父组件想要给子组件传值，在引用的子组件中 利用：传值，例如： 父组件 <scoll :listen-scroll="listenScroll"> <scoll/> 子组件： prop：["listen-scroll"] 子组件接受父组件的传值时，使用prop接受， 子组件传递给父组件 子组件传递给父组件通过$emit 传递 父组件： 接收时还用showAddrName，updateAddrName是父组件中定义的别名，data是子组件传递的数据 <s
$attrs
郭宝的博客
09-17 5643
$attrs 是什么？ $attrs是Vue实例的属性。 官网介绍 个人理解： 所谓的$arrts其实就是多级组件中的props，它就像一个中间件，用来传递爷组件给孙组件的数据，使用的时候只需给父组件中的孙组件配置 v-bind="$attrs" ,然后再爷组件中传入孙组件所需要的数据，孙组件正常接收即可。 ...
vue爷孙组件之间传值
08-26
在Vue中，爷孙组件之间的数据传递是通过props和$emit来实现的。爷孙组件之间不能直接通信，需要通过父组件作为中间组件传递数据。具体实现步骤如下： 1. 在祖父组件（GrandFather.vue）中，定义要传递的数据msg1和...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值