Vue之$attrs与$listeners

最新推荐文章于 2025-06-16 09:41:15 发布
最新推荐文章于 2025-06-16 09:41:15 发布
阅读量1.6k 收藏
点赞数
分类专栏： vue
博客介绍了Vue中的$attrs、inheritAttrs和$listeners。$attrs可继承父组件属性（除特定属性），inheritAttrs默认继承属性，可设为false，$listeners包含组件上所有监听器。它们主要用于父组件向子组件或孙组件传递数据。

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

名词解释
$attrs–继承所有的父组件属性（除了prop传递的属性、class 和 style ）

inheritAttrs：默认值true,继承所有的父组件属性（除props的特定绑定）作为普通的HTML特性应用在子组件的根元素上，如果你不希望组件的根元素继承特性设置inheritAttrs: false,但是class属性会继承

$ listeners，它是一个对象，里面包含了作用在这个组件上的所有监听器，你就可以配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。

主要用途
用在父组件传递数据给子组件或者孙组件

参考

12.（vue3.x+vite）组件间通信方式之$attrs与$listeners
GIS之家家长
09-19 352
12.（vue3.x+vite）组件间通信方式之$attrs与$listeners
$attrs 和 $listeners (vue2&&vue3)
每天都要努力学习哦~~
10-09 8434
listeners。
$attrs 和 $listeners
qq_41709082的博客
10-12 5946
$attrs 和 $listeners 一、概念： $attrs: 包括组件 props 和 emits property 中未包含的所有属性 (例如，class、style、v-on 监听器等) ps: 官网原话 其实就可以简单理解为：除了组件内props声名了的所有给组件传的值（class,style除外） 这个属性有什么作用呢？ 当我们需要给多层嵌套父子组件传值，而且杂的时候，可以直接使用它，可以使代码看起来更加简洁。案例如下： // parent.vue <m-child :data-s
详解vue中attrs和listeners的使用及高级组件封装
最新发布
鹏多多的博客
06-16 1100
Vue中$attrs和$listeners是组件通信的重要工具，$attrs收集父组件传递的非prop属性，$listeners包含父组件的非.native事件监听器。通过v-bind="$attrs"和v-on="$listeners"可实现属性与事件的透传，特别适用于多层嵌套组件封装。文中通过复选框组件示例展示了二者配合使用的方法，并指出Vue 3中$listeners已被合并到$attrs中。这些特性在组件库开发和高阶组件封装中非常实用。
Vue - 组件通信之$attrs、$listeners
weixin_30505751的博客
09-15 323
前言 vue通信手段有很多种，props/emit、vuex、event bus、provide/inject 等。还有一种通信方式，那就是$attrs和$listeners，之前早就听说这两个api，趁着有空来补补。这种方式挺优雅，使用起来也不赖。下面例子都会通过父、子、孙子，三者的关系来说明使用方式。 $attrs 官方解释： 包含了父作用域中不作为 prop 被识...
vue中的$attrs和$listeners
weixin_40489411的博客
04-20 968
vue中的$attrs和$listeners 多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，这就有点大材小用了。所以就有了 $attrs / $listeners ，通常配合 inheritAttrs 一起使用。 inheritAttrs：默认值为 true。 默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用
关于vue的$attrs和$listeners
huangzhixin1996的博客
03-31 1320
使用vue定义深层级组件的解放方案参考
Vue为什么要谨慎使用$attrs与$listeners
10-14
首先，我们要了解为什么在Vue组件中要谨慎使用$attrs与$listeners。主要原因是它们会使子组件对祖先组件的依赖变得隐晦，如果祖先组件的属性发生变化，那么所有使用了$attrs的子组件也可能会触发更新，即使这些属性...
Vue v2.4中新增的$attrs及$listeners属性使用教程
08-28
在 Vue v2.4 版本中，引入了两个新的属性：$attrs 和 $listeners，这些属性极大地简化了组件间的数据传递和事件监听，尤其是在多级组件嵌套的情况下。本文将详细介绍这两个属性的使用方法及其优势。 1. **$attrs**...
Vue组件通信$attrs、$listeners实现原理解析
10-14
Vue.js 是一款流行的前端框架，它的组件化设计是其强大之处。在开发过程中，组件间的通信是必不可少的，Vue 提供了多种通信机制，如 props、事件 emit、Vuex、Event Bus 以及 provide/inject 等。在这些机制中，`$...
Vue组件通信-$attrs与$listeners概念与应用
weixin_71403100的博客
04-25 6638
一、$attrs与$listeners是什么$attrs与$listeners都是是属于组件实例自身的一个属性：包含了父作用域中不包含在props中的属性，这些属性可以在组件内部使用，也可以通过v-bind="$attrs"传递给子组件使用。：包含了父作用域中的(不含.sync修饰器的)v-on事件监听器，这些监听器可以在组件内部使用，也可以通过v-on="$listeners"传递给子组件使用。
vue $attrs 和 $listeners
逍湘子
05-29 516
vm.$attrs 包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件,在创建高级别的组件时非常有用 vm.$listeners 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件,在创建
Vue 中 $attrs 与 $listeners 的详解
AI_huihui的博客
11-28 3333
介绍 $attrs 继承所有的父组件属性（没有通过 props 接收的属性还有 class 类名 和 style 样式 ）。 inheritAttrs： 是否非 props 属性显示在标签最外层，默认值true ，就是继承所有的父组件属性（除了 props 特定绑定外）作为普通的HTML特性应用在子组件的根元素上，如果你不希望组件的根元素继承特性就设置 inheritAttrs: false ,但是 class 还是会继承。 $listeners 它是一个对象，能接收所有的方法绑定，里面包含..
vue组件通信 $attrs/$listeners
seimeii的博客
07-29 385
vue组件间通信六种方式（完整版）
Vue2.4中$attrs，$listeners，inheritAttrs的使用和理解
m0_37115637的博客
03-24 1061
先来看一张图如下 vue父子组件之间的传值我们都知道使用props和emit，但是祖孙之间的传值在以前，我们都需要子辈作为中间人，当祖辈有值要传递给孙辈时，需要子辈作为中间人把值传递给孙辈，当孙辈想要改变祖辈的值时，需要先emit子辈的方法，然后子辈再emit父辈的方法从而改变祖辈的值，如果是多级组件嵌套的话，那么祖孙辈之间传值，就会变得非常的繁琐，为了解决这个需求，vue2.4版本产生了$...
Vue-- $attrs与$listeners的详解
时清云的博客
06-26 3854
1、vm.$attrs 2.4.0新增 类型 { [key: string]: string } 只读 详细 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。 简单点讲就是包含了所有父组件在子组件上设置的属性（除了prop传递的属性、class 和 styl
$attrs和$listeners的应用
weixin_42274805的博客
09-22 1897
引言 多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。如果为了传递数据而无中间层处理，则可以使用Vue中提供的$attrs和$listeners 父子AB组件通讯 A to B 通过props的方式向子组件传递，B to A 通过在 B 组件中 $emit, A 组件中 v-on 的方式实现 /** 组件A */ <template> <compoentB @data-add="handleA...
$attrs,$listeners
qq_45021462的博客
08-31 434
通过$listeners在c组件触发了A组件的方法。'通过$listeners触发父组件的事件''这是父组件的方法''这是子组件的方法''这是孙组件的方法'
$attrs和$listeners
qq_44473483的博客
10-22 2159
$attrs和$listeners 我们都知道父子组件的通信可以使用props和$emit的方式，但是如果进行父子组件和孙子组件的通讯使用props和\$emit的话就比较复杂了，需要层层传递。而，$attrs和$listeners就减少了子组件的代码。所以在我看来，它并不是一种解决通讯的方法，只是一种打通父组件和孙组件之间的阻碍，让他们可以更好的使用props和$emit的手段。 $attrs 官方介绍： 当父组件传数据给子组件的时候，如果子组件的props没有进行接收，那数据就会被收集到子组件的$at
Vue中$attrs与$listeners的谨慎使用解析
Vue中的`$attrs`和`$listeners`是两个特殊的属性，它们主要用于在组件间传递属性和事件。在处理复杂的组件嵌套和通信时，这两个属性提供了便利，但也可能带来潜在的问题。下面我们将深入探讨为什么在使用`$attrs`和`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值