Vue 父子组件传值中inheritAttrs +$attrs + $listeners用法

最新推荐文章于 2024-04-18 09:06:22 发布
原创 最新推荐文章于 2024-04-18 09:06:22 发布 · 282 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #vue.js #前端

本文详细介绍了Vue组件中如何利用inheritAttrs, $attrs, 和 $listeners进行父子组件间的属性和事件传递，包括它们的作用、用法和在实际场景中的应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Vue 父子组件传值中inheritAttrs +$attrs + $listeners用法

我们在vue组件中常用的传值方式有

  1. 通过 props 的方式向子组件传递(父子组件)
  2. vuex 进行状态管理(父子组件和非父子组件)
  3. 非父子组件的通信传递 Vue Event Bus，使用Vue的实例，实现事件的监听和发布，实现组件之间的传递。

下面介绍第四种方式

inheritAttrs

默认情况下父作用域的不被子组件用 props接收的属性都会被放到attrs这个对象中，子孙组件可通过‘attrs这个对象中，子孙组件可通过`attrs这个对象中，子孙组件可通过‘attrs`获取没有接收的父组件绑定的属性及属性值，如果设置了inheritAttrs为false，则不能通过$attrs获取没有接收的父组件绑定的属性及属性值

简单来说，就是控制子孙组件可否通过$attrs获取上级组件传过来没有被接收的值

在这里插入图片描述

$attrs

存放没有被子组件通过props接收的数据对象 (class 和 style 除外)，并且可以通过 v-bind="$attrs"传入内部组件

在这里插入图片描述

$listeners

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners"传入内部组件，
简单来说，就是子孙组件触发父组件事件

在这里插入图片描述

总结

如果父组件向子传值，子在想孙传值，子组件就要通过props接收在传给孙，组组件不用这个值就没必要接收，这是我们可以在子组件中通过attrs过去要传给孙组件的值，通过v−bind="attrs过去要传给孙组件的值，通过v-bind="attrs过去要传给孙组件的值，通过v−bind="attrs"把要传给孙组件的值接收并传给孙组件，节省了中间步骤。
v-on="listeners"同理，孙组件通过v−on="listeners"同理，孙组件通过v-on="listeners"同理，孙组件通过v−on="listeners"触发父组件中的事件

Vue—组件实例之$attrs
雷雨天的雷胖子
04-27 2388
一、概述 想象一下，你打算封装一个自定义的input组件my-input，需要从父组件传入type、placeholder、title等多个html特性。此时子组件my-input中需要用props属性接收父组件传递的数据。 export default{ name: 'myInput', props: ['type', 'placeholder', 'title'] } ...
VUE部分笔记：多重嵌套的组件传值$attrs和$listeners
lyr190的博客
03-08 5369
多重嵌套的组件A>B>C中 //$attrs在B组件中自动获得在A组件中，B组件上绑定的，除了props传输、.native、CSS和Style之外的数据 //components-a <template> <div> <components-b :name="name"
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
08-27
主要介绍了Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners),需要的朋友可以参考下
Vue 父子组件数据传递( inheritAttrs + $attrs + $listeners)
weixin_33953384的博客
04-28 176
当我们在书写 vue 组件的时候，也许可能会用到数据传递；将父组件的数据传递给子组件，有时候也需要通过子组件去事件去触发父组件的事件； 每当我们遇到这样的需求的时候，我们总是会想到有三种解决办法： 通过 props 的方式向子组件传递(父子组件) vuex 进行状态管理(父子组件和非父子组件) vuex 非父子组件的通信传递 Vue Event Bus，使用Vue的实例，实现事件的监...
vue组件之间传值的方式（inheritAttrs + $attrs + $listeners）
风如也的博客
07-23 394
组件之间传递数据的方式可能有 父组件通过 props 的方式向子组件传值 子组件通过 $emit 传递的方法参数向父组件传值 使用 vuex 进行状态管理 兄弟组件之间可以使用 event bus 事件总线传值 非父子组件之间使用 inheritAttrs + $attrs + $listeners 传值（跨多级的组件嵌套关系） 这里主要讲最后一种方式传值 应用场景图大概是这样 三个组件，A组件与B组件是父子组件，A组件与C组件是跨多级的组件嵌套关系 代码示例： fatherA.vue <tem
Vue 父子组件通信 $attrs及$listeners属性使用教程
肖肖肖丽珠的博客
02-18 4126
https://blog.csdn.net/qq_33769914/article/details/87347371 https://blog.csdn.net/qq_33769914/article/details/81012431   上面两篇都介绍过父子组件的通信。   下面介绍一种新的方式，使用$attrs及$listeners属性 当我们有三个组件。A。B。C。A是父组件。B...
v-bind=“$attrs“和v-on=“$listeners“的用法
最新发布
weixin_46504400的博客
04-18 1129
v-bind=“$attrs”：这个指令的作用是将父组件传递给子组件的所有属性绑定到子组件的根元素上。这样做的好处是，即使子组件没有显式声明这些属性，它们仍然可以访问到这些属性。v-on=“$listeners”：这个指令的作用是将父组件传递给子组件的事件监听器绑定到子组件的根元素上。通常，我们在编写组件时，会希望组件的API能够更加灵活，以便适应不同的使用场景。通过这种方式，我们可以让子组件接收到父组件传递的任何属性和事件，从而增强了组件的通用性和灵活性。子组件直接this.
Vue v2.4中新增的$attrs及$listeners属性使用教程
08-28
在 Vue v2.4 版本中，引入了两个新的属性：$attrs 和 $listeners，这些属性极大地简化了组件间的数据传递和事件监听，尤其是在多级组件嵌套的情况下。本文将详细介绍这两个属性的使用方法及其优势。 1. **$attrs**...
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
11-21
vue父子组件之间的传值我们都知道使用props和emit，但是祖孙之间的传值在以前，我们都需要子辈作为中间人，当祖辈有值要传递给孙辈时，需要子辈作为中间人把值传递给孙辈，当孙辈想要改变祖辈的值时，需要先emit子辈...
Vue--父子孙组件传值之$attrs和$listeners详解
铃儿响叮当
09-18 1853
通常vue中父子组件传值，我们一般都是用props及$emit来实现，这没毛病，但是如果存在多代呢？例如爷、父、子、孙、太孙……等多代存在的时候呢？当然你用props及$emit一层层传递也没毛病，唯一的问题就是很麻烦…… 而vue在2.4.0版本中，为了解决这个问题，便提出了$attrs和$listeners，请见以下示例： 示例一：不绑定$attrs时，看下每个下级组件，$attrs默认会接收到什么？ index.vue文件(爷) <template> <A
vue 子组件的子组件传值可使用inheritAttrs和attrs
渐离的博客
08-05 333
父组件通过props可以向子组件传值，但在日常的开发中，还有一种情况很常见，就是父组件给子组件传值，这个值还要从子组件传给它的子组件，所以，我们可能会看到这样的代码： //父组件 <div> <child :text="text"></child> </div> //子组件 <div> <my-child :text="text"></my-child> </div> //子组件的子组件
Vue中$attrs和inheritAttrs的理解
TinaSlowDown的博客
05-26 1309
开发过程中我们有时就遇到这样的场景： 1）.我们需要在引用的父组件中，根据需要添加一些属性，而这些属性我们又不希望在组件中一一利用props传递； 2）.我们怎样确定父组件中添加的这些属性会添加到子组件的哪个元素中 官方文档讲解组件的属性传递时，讲到$attrs和inheritAttrs这两个属性，且两个属性结合会比较好用。乍一看没看懂，结合代码演示才搞清楚。在此记录，也供有同样困惑的朋友分享。 ...
vue 组件传值方法2-使用$attrs实现组件传值
宏斌的博客
02-24 3771
图中 第一行是最高级组件里的两条数据’App‘和‘组件传值’，‘组件传值’是用笨办法每一个组件中都用props定义个属性接受，很费劲，数据多了不小心就出错； ‘App’是用attrs来实现的，官网是这么描述的：包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 ...
Vue父子孙组件数据传递 - $attrs与$listeners的使用
weixin_43968658的博客
06-16 1478
Vue-$attrs与$listeners的使用 公司项目中有需要父组件传递数据到子孙组件，并不是只传到子组件，有可能有3、4层嵌套、甚至更多。用props无限传递明显工作量大很多，而且嵌套太多可能会弄错。此时想到用$attrs。同样的，子孙组件要触发父组件的事件也不能无限嵌套$emit来出发，此时就可以用到$listeners。 vm.$attrs 类型 { [key: string]: string } 只读 详细 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 s
Vue v2.4中 新增的$attrs及$listeners属性
xuxu_qkz的博客
07-26 3502
Vue v2.4中 新增的$attrs及$listeners属性 用于跨级组件传值 $attrs–继承所有的父组件属性（除了prop传递的属性、class 和 style ） inheritAttrs：默认值true,继承所有的父组件属性（除props的特定绑定）作为普通的HTML特性应用在子组件的根元素上，如果你不希望组件的根元素继承特性设置inheritAttrs: false,但是c...
vue 祖孙通信 $attrs $listeners 和inheritAttrs
weixin_49021723的博客
05-31 259
A组件给了B 组件一些属性和事件：files属性，page属性，add事件，delete事件 B组件只需要files属性和add事件，所以B组件内用props接收这两就好了， 剩下的page属性，delete事件，有两种情况， 1：啥都不干，那么这两个就会被B组件的根元素继承。 2：利用$attrs $listeners 和inheritAttrs，给C组件用 inheritAttrs：父组件传递给子组件的属性，事件，未被props接收默认被子组件的根元素接收应用，利用该属性......
vue组件传值之$attrs、$listeners
weixin_45805570的博客
05-02 2483
组件传值总结 props和emit：父子组件传值 provide和inject：父子组件或者爷孙组件传值 $parent,$root,$chidren:父子组件传值 vuex 事件总线(vue实例) $attrs、$listeners:父子组件传值 前5种可能大部人都知道，这篇文章主要对$attrs、$listener进行一个介绍。 $attrs、$listeners $attrs: 官方文档介绍：包含了父作用域不作为prop被识别（且获取）的attribute绑定（class和style除外）。当一个
vue中 使用 $attrs 实现非父子之间的传参
业余前端的职业经历
02-01 338
通过bus文件传参,可能很多人都知道了，我在前面也说过,在这里就不一一赘述了 废话不多BB 还是直奔主题 在爷爷组件中 data(){ return { msg:'hello vue.js' } } <parent :msg="msg"> 在爸爸组件中 <child v-...
vue 中父级样式深度覆盖子组件
shykevin的博客
03-17 1258
一、概述 项目需要的原因，在sub组件的父级list组件中需要用到xhcj组件，同时sub组件中也用到了xhcj组件，两个地方代码逻辑是相同，仅仅是样式有些微的差别，所以决定共用组件，然后覆盖样式。 style标签上的scoped属性会致使样式只作用于当前组件，对子组件是不起作用的，但是不加scoped会使父级引入的xhcj和这里引用的xhcj样式都变化，所以也是不可以的。 二、解决方法 这是最...
父子组件中$attrs和$listeners使用
04-26
$attrs 和 $listeners 属性是 Vue.js 框架中的两个特殊的对象，它们被用于父子组件之间的通信。$attrs 对象包含了父组件向子组件传递的所有属性和值，这些属性和值都不是子组件自己定义的 props。$listeners 对象...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值