vue2中$attrs 和 $listeners的使用

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

#服务器 #前端 #vue

本文介绍了Vue.js中如何通过$v-bind:$attrs处理多层组件间的属性绑定，以及$v-on:$listeners用于接收父组件的事件。重点展示了如何在A>B>C>D的组件层级结构中，利用这些特性进行数据和信息的传递。

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

  • 功能： 用于实现多层组件通信（多于父子组件通信层级）
  • 用法：
    v-bind=$attrs 和 v-on=$listeners

  1. vm.attrs包含了父作用域中不作为prop被识别(且获取)的attribute绑定(class和style除外)。当一个组件没有声明任何prop时，这里会包含所有父作用域的绑定(class和style除外)，并且可以通过v−bind="attrs 包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="attrs包含了父作用域中不作为prop被识别(且获取)的attribute绑定(class和style除外)。当一个组件没有声明任何prop时，这里会包含所有父作用域的绑定(class和style除外)，并且可以通过v−bind="attrs" 传入内部组件——在创建高级别的组件时非常有用。

  2. vm.listeners包含了父作用域中的(不含.native修饰器的)v−on事件监听器。它可以通过v−on="listeners 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="listeners包含了父作用域中的(不含.native修饰器的)v−on事件监听器。它可以通过v−on="listeners" 传入内部组件——在创建更高层次的组件时非常有用。

应用

  • A > B > C >D
A组件中数据 ---> prop传递到子组件中
C组件获取A组件的属性： <C v-bind="$attrs"></C> ----可以this.$attrs获取未被props获取的A组件的属性
C组件传递信息给A组件:  <C v-on="$listeners"></C> ---> <A @xxx="xx"><A> ----C组件内容通过this.$emit发送事件，中介$listeners， 最后由A组件接受事件
yy_33404590
关注
$attrs 和 $listeners (vue2&&vue3)
每天都要努力学习哦~~
10-09 8411
listeners。
Vue2.4中的$attrs和$listener使用
qq_41632427的博客
05-24 384
当一个组件没有声明任何 prop 时，attrs会包含所有父作用域的绑定class和style除外，并且可以通过v−bindattrs会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="attrs会包含所有父作用域的绑定class和style除外，并且可以通过v−bindattrs" 传入内部组件，一般用在子组件的子元素上。
Vue2.x $attrs和$listeners
黄彪博客
05-29 2198
文章目录非 Prop 的 Attribute（$attrs）参考应用场景替换/合并已有的 Attribute禁用 Attribute 继承$attrs概念说明$attrs 案例inheritAttrs: false 和 $attrs ；配合使用解决的问题？将原生事件绑定到组件参考$listeners概念说明案例思维导图附件 非 Prop 的 Attribute（$attrs） 参考 非 Prop 的 Attribute vm.$attrs API 应用场景 一个非 prop 的 attribute 是
$attrs和$listeners
最新发布
m0_51429350的博客
06-16 640
attrs是一个对象，包含了父组件传递给当前组件的所有非 props 属性（attribute）未在props中定义的 HTML 原生属性（如classstyleid等）自定义数据属性（如data-*⚠️ 注意：如果属性已经在props中定义，则不会出现在$attrs中。$listeners是一个对象，包含父组件绑定到当前组件上的所有事件监听器。键是事件名值是对应的回调函数在 Vue2 中，可以使用$listeners将事件从父组件传递到子组件或更深层的 DOM 元素。特性Vue2Vue3。
Vue中的$attrs
weixin_45403802的博客
01-23 3286
今天产品经理要求做保留某组件全部功能，还要在它的基础上增加东西。如果不嫌麻烦的话就笨办法，但是想一下怎么只用少量代码高效的二次封装组件呢。
vue2中 attrs 和 listeners 的使用（组件通信）
qq_23858785的博客
05-08 845
vue2中 attrs 和 listeners 的使用（组件通信）
Vue中$attrs的作用和使用方法
qq_39454432的博客
04-12 1695
Vue中 $attrs 的作用和使用方法
Vue——$attrs和$listeners
六耳石猴的博客
12-10 623
$attrs Vue2官方文档的解释如下： 作用 简单来说就是 组件向下传递数据 的，是props通信的补充方案，避免了组件中props过多的窘境。 使用 祖父组件GrandPa如下： 传给Parent组件的数据有name，age， gender <template> <div> 我是祖父: 下面是爸爸 <Parent v-bind="$attrs" :name="'佩奇爸爸'" :age="age" :sex="sex" /&gt
vue2.x中$attrs的使用
小王的技术库
01-17 1457
为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
初学Vue（全家桶）-第n天（vue2）：关于v-bind=“$attrs“、v-bind=“$props“ 和v-on=“$listeners“的使用
lalala_dxf的博客
02-12 6497
可以将父组件的所有props下发给它的子组件,子组件需要在其props:{} 中定义要接受的props。: 将调用组件时的组件标签上绑定的的属性(class和style除外)向下传递。在(避免父作用域的不被认作props的特性绑定应用在子组件的根元素上)。：通过，将底层级的信息往高层级传递。
vue v-bind=“$attrs“、v-on=“$listeners“
snow的博客
09-29 5498
vue中使用v-bind="$attrs"和v-on="$listeners"进行多层组件监听 - 靳哲 - 博客园
Vue v2.4中新增的$attrs及$listeners属性使用教程
11-29
前言 多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点杀鸡用牛刀。Vue 2.4 版本提供了另一种方法，使用 v-bind=”$attrs”, 将父组件中不被认为 props特性绑定的属性传入子组件中，通常配合 interitAttrs 选项一起使用。之所以要提到这两个属性，是因为两者的出现使得组件之间跨组件的通信在不依赖 vuex 和事件总线的情况下变得简洁，业务清晰。 首先分析以下应用场景： A 组件与 B 组件之间的通信： （父子组件） 如上图所示，A、B、C三个组件依次嵌套，按照 Vue 的开发习惯，父子组件
Vue2.x跨级/嵌套组件通信$attrs，$listeners，inheritAttrs的使用
阿里巴啦的博客
05-08 1877
一般来说，组件可以有以下几种关系： 如上图所示，A 和 B、B 和 C/D 都是父子关系，C 和 D 是兄弟关系，A 和 C/D 是隔代关系。 vue组件之间的通信6种为： 父子通信：props/$emit 兄弟通信：eventHub（$emit / $on） vue 的状态管理器，存储的数据是响应式：vuex 多级组件嵌套：$attrs / $listeners 注入依赖：provide/inject 组件访问：$parent / $children与 ref 假如我们想让A和C进行通信，有些小伙伴就
vue如何使用$attrs,$listeners
topchenxi987的博客
03-03 1212
attrs$listeners：用于将父组件传递的非props属性绑定到子组件的某个元素上。：用于将父组件传递的事件监听器绑定到子组件的某个元素上（Vue 2 中使用）。在 Vue 3 中，$listeners被废弃，$attrs同时包含了属性和事件监听器，因此可以直接使用。这两个指令在组件封装和高阶组件开发中非常有用，可以帮助你更好地管理组件的属性和事件传递。
vue中使用v-bind=“$attrs“和v-on=“$listeners“进行多层组件监听
MISS_zhang_0110的博客
01-13 2979
vue中使用v-bind="$attrs"和v-on="$listeners"进行多层组件监听一、层级关系1.top组件2.center组件3.bottom组件 vue组件之间通信，我们可以使用props和vuex两种方式，但是vuex太重，props在多级组件中使用又太麻烦， vue2.4版本提供了另一种方法，使用v-bind="$attrs"，将父组件中不被认为 props特性绑定的属性传入子组件中，通常配合 interitAttrs 选项一起使用。 v-bind="props":可以将父组件的所
v-bind=“$attrs“和v-on=“$listeners“的用法
weixin_46504400的博客
04-18 1128
v-bind=“$attrs”：这个指令的作用是将父组件传递给子组件的所有属性绑定到子组件的根元素上。这样做的好处是，即使子组件没有显式声明这些属性，它们仍然可以访问到这些属性。v-on=“$listeners”：这个指令的作用是将父组件传递给子组件的事件监听器绑定到子组件的根元素上。通常，我们在编写组件时，会希望组件的API能够更加灵活，以便适应不同的使用场景。通过这种方式，我们可以让子组件接收到父组件传递的任何属性和事件，从而增强了组件的通用性和灵活性。子组件直接this.
Vue2,带你探秘$attrs和$listeners
qq_45188736的博客
02-17 931
带你探秘$ attrs和$ listeners $attrs 包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。 演示如下： <script> let m2 = { props: ["c"]
v-bind=“$attrs“ v-on=“$listeners“的理解及用法
u013994400的博客
03-27 4153
1、这可以理解成穿透，多层组件监听2、用于多层级组件之间的通信3、高层级向底层级传值 v-bind=‘$attrs’4、低层级向高层级传值 v-on=“$listeners”
vue2的$listeners的使用
我的博客简介
07-29 4007
listeners用于多层次组件传递事件监听器，爷爷辈组件向父辈、孙子辈、曾孙子辈……组件传递事件（与$attrs不同，不存在半路被拦截的情况）父亲通过点击div触发click事件，同时向孙子（GrandSon）传递$listeners。爷爷（GrandFather）给父亲（Father）绑定一个click事件。写法如下（注v-on不能用简写@，虽然不报错，但是也不生效）...
Vue中$attrs与$listeners的谨慎使用解析
Vue中的`$attrs`和`$listeners`是两个特殊的属性，它们主要用于在组件间传递属性和事件。在处理复杂的组件嵌套和通信时，这两个属性提供了便利，但也可能带来潜在的问题。下面我们将深入探讨为什么在使用`$attrs`和`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值