vue组件深层次传值方式-$attrs/$listeners

最新推荐文章于 2024-11-12 11:02:35 发布
最新推荐文章于 2024-11-12 11:02:35 发布
阅读量888 收藏 2
点赞数
分类专栏： Vue 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xieyuleisss/article/details/110265244
版权
Vue组件A到C的深层通信通常通过B组件中转，但当嵌套过多时，$attrs和$listeners在Vue2.4中引入以简化通信。$attrs包含未声明为prop的父属性（除class和style），而$listeners则包含父组件的v-on事件监听器。两者在子组件中结合使用，能有效传递属性和事件，减少代码复杂性。
摘要由CSDN通过智能技术生成

a t t r s 与 attrs与 attrs与listeners的主要应用是实现多层嵌套传递。
在这里插入图片描述
组件A与组件B通信一般都会使用组件B中转，即A传递给B，B再给C，但是如果A到C组件之间嵌套的组件过多，需要传递的事件和属性较多，会导致代码繁琐，代码维护困难。在vue2.4中，为了解决该需求，引入了 a t t r s 和 attrs和 attrs和listeners，新增了inheritAttrs选项。

$attrs的使用

官方定义：
包含了父作用域中不作为prop 被识别 (且获取) 的特性绑定 (class和 style除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class和 style除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
（好抽象一脸懵逼。。。）
a t t r s 只 代 表 的 是 那 些 没 有 被 声 明 为 p r o p s 的 属 性 ， 如 果 某 个 p r o p 被 子 组 件 中 声 明 了 （ 就 是 这 个 属 性 已 经 在 子 组 件 的 p r o p s 中 了 ） ， 在 子 组 件 中 的 attrs只代表的是那些没有被声明为props的属性，如果某个prop被子组件中声明了（就是这个属性已经在子组件的props中了），在子组件中的 attrs只代表的是那些没有被声明为props的属性，如果某个prop被子组件中声明了（就是这个属性已经在子组件

最低0.47元/天 解锁文章
解决深层次组件间的通信 $attrs, $listeners
starleejay的博客
11-02 1557
inheritAttrs 在谈及深层次组件通信之前先说一下 inheritAttrs, 这个属性在官网中是这样解释的： 默认情况下父作用域的不被认作 props 的特性绑定将会 ‘回退’ 且作为普通的 HTML 特性应用在子组件的跟元素上。 当撰写包裹一个目标元素或者另一个组件的组件时，这可能不会总是符合预期行为。 通过设置 inheritAttrs 为 false, 这些默认行为将会被去掉。 ...
vue组件传值的12种方法
土豆的博客
08-25 1534
props $emit .sync v-model ref $children / $parent $attrs / $listeners provide / inject EventBus Vuex $root slot
vue组件深层传值inheritAttrs、$attrs、$listeners
qq_32615575的博客
08-19 574
1、$attrs 组件深层传值 可通过父组件绑定 v-bind="$attrs"传给子组件 一般子组件this.$attrs可以拿到父组件的所有传输的属性。 当子组件props注册了声明某属性之后，this.$attrs将不包含该属性； 同理通过v-bind="$attrs"绑定孙子组件也不会包含子组件props声明的属性。 props: { data:{ type: Array, default: () => [],//数组格式[{label:xx,valu...
vue深层组件嵌套传值.md
07-26
在父组件A 里 引入了子组件B , 但同时B组件又是子组件C的父组件,C又是子组件D的父组件 那么, A组件分别向B ,C ,D传值是如何实现的? D组件又是如何分别向C B A 传值的
【Vue】Vue3.0（二十三）Vue3.0中$attrs 的概念和使用场景
最新发布
qq_39666711的博客
11-12 868
组件不需要处理这些属性，实现了在电商应用场景下组件间属性的合理传递。接收的属性，以便在组件内部或继续向下传递给更深层的子组件时使用。//测试一下在自己的组件中只定义的变量是否会被放在$attrs中。是一个组件实例属性，它包含了父组件传递给子组件的所有非。当父组件向子组件传递数据时，属性是指那些父组件传递过来但子组件没有通过。组件会接收到一些关于产品的通用属性，如。组件（产品页面组件），它包含一个。组件（产品详情组件）和一个。组件并不需要使用这些属性。组件（产品评论组件）。等，这些属性需要传递给。
vue学习-深层组件传递数据Provide/inject
Rulelur的博客
10-29 481
1.Provide/inject 父组件的数据可以放在provide，任意层级的子组件声明inject，便可以访问到该数据 provide: { msg: "父组件数据", }, inject: ["msg"] 值为对象的provide无法访问组件实例 property，要访问需将provide 转换为返回对象的函数，子组件部分不需要做修改。 data() { return { dataMsg: "父组件数据", }; }, pr.
Vue组件传值（三）之 深层嵌套组件传值 - $attrs 和 $listeners
weixin_34234721的博客
03-07 1426
$attrs 　　　　包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class和style除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class和style除外)，并且可以通过v-bind="$attrs"传入内部组件——在创建高级别的组件时非常有用。 $listener 　　　　包含了父作用域中的 (不含.native...
vue组件深度传值provide、inject,值类型响应式的方法
weixin_50061893的博客
08-26 2217
文章目录前言一、provide,inject是什么？二、使用步骤1.祖先组件provide注入，并且传入的是整个this指向2.后代组件接收总结 前言 最近封装了一个上传,下载,查看附件的组件,其中有三层层级关系,需要深层次传值,一开始用props组件传值,但是要传两层感觉有点不优雅.后面上面查了vue的provide,inject方法,但是因为是传的值类型不能响应式,后面想到了一个方法可以响应式// 提示：以下是本篇文章正文内容，下面案例可供参考 一、provide,inject是什么？ 通常，当我们
Vue为什么要谨慎使用$attrs与$listeners
10-14
如果确实需要从父组件向更深层次的子组件传递数据，应该尽量使用props来明确传递所需的数据，并在子组件中声明这些数据为props，这样可以更加明确地控制数据流和组件间的依赖关系，避免隐晦的依赖关系导致的性能问题...
vue变量传值_vue组件之间相互传值的方式
weixin_39873208的博客
12-20 818
我们都知道 Vue 作为一个轻量级的前端框架，其核心就是组件化开发。Vue 就是由一个一个的组件构成的，组件化是它的精髓，也是最强大的功能之一。而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。但在实际项目开发过程中，我们需要访问其他组件的数据，这样就就有了组件通信的问题。在 vue 中组件之间的关系有：父子，兄弟，隔代。针对不同的关系，怎么实现数据传递，就是接下来要讲的。...
vue2父子深层嵌套传值
zcr的博客
08-07 354
解决父子传值中深层嵌套的问题。
vue中赋值操作深入
吴佳强的博客
10-28 4009
直接对computed的变量进行赋值，这个操作说不行的，如果需要改变computed里面变量的值，需要改变这个变量里面依赖的变量，依赖的变量值发生了改变，computed里面就能监听到变化，自然而然computed里变量的值就发生了变化； 引用赋值的思考 data() { return {productTypeList: [] }; }, created() { this.productTypeList = this.$store.state.productT..
【Vue】组件传值的六种方法
weixin_42213951的博客
03-19 2469
Vue 组件之间的通信大概归类为： 父子组件通信: props/emit；ref/refs；emit；ref/refs；emit；ref/refs；attrs / listeners；listeners；listeners；parent / children兄弟组件通信:eventBus；vuex跨级通信:eventBus；Vuex；children 兄弟组件通信: eventBus；vuex 跨级通信: eventBus；Vuex；children兄弟组件通信:eventBus；vuex跨级通信:even
vue 组件之间相互传值的6种方法
一步一个脚印，踏实努力，向着目标前进
01-28 1万+
优点实现了数据从子组件向父组件的传递，遵循响应式设计原则。缺点只能实现相邻组件之间的通信，对于多层级嵌套组件间的通信较为复杂。如果组件间交互复杂，可能会导致大量自定义事件的使用，影响代码可读性和可维护性。
vue组件传值的13种方式
热门推荐
dan_seek的博客
10-19 6万+
vue组件传值 不写这篇文章，我自己都不知道我知道的vue组件传值的方式竟然有13种之多，其实静下来想想，常用的也有五六种。 1、父组件传给子组件 在子组件里定义一个props,即props:[‘msg’]，msg可以是对象也可以是基本数据类型 如果你想定义一个默认值，即 props:{msg: {type: String, default: ‘hello world’}}, 需要注意的是这种传值是...
vue组件间通信传递数据的四种方式（路由传参、父子组件传参、兄弟组件传参、深层次传参）
前端、python爱好者
10-24 8062
1. props 和 emits传参 2. 路由传参（query、params） 3. 第三方库（pubsub-js）
【vue】多层级组件传值（通讯）方式
八块腹肌的博客
05-08 3393
$listeners和$attrs $listeners是将三级组件的事件和参数传递给一二级组件 $attrs可以将一级组件的数据直接在三级组件中使用，比较优雅的一个传值方式，不用像props那么繁琐 在一级组件中引入二级组件，并将data和message传递给二级组件；getLevel3Messgae是三级组件中的事件 <template> <!-- 一级组件 --> <div class="level-1"> <!-- 二级组件 --&g
vue组件间传值的六种方法
King的博客
10-13 8771
vue组件间传值
Vue深层组件嵌套传值策略：$attrs与$listeners的应用
总结来说，Vue的深层组件嵌套传值主要是通过props进行数据流动，结合$attrs处理未声明的属性和$listeners处理事件。理解并合理运用这些机制，可以有效地管理复杂的组件层级之间的数据交互。在实际项目中，应根据具体...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值