Vue.js中的$attrs和$listeners属性详解

最新推荐文章于 2025-03-26 14:12:14 发布

JhzDev

最新推荐文章于 2025-03-26 14:12:14 发布

阅读量178

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/JhzDev/article/details/133291089

Vue.Js 专栏收录该内容

49 篇文章 ¥59.90 ¥99.00

订阅专栏

Vue.js中的$attrs和$listeners属性是处理父子组件间通信的关键。$attrs包含父组件传递的未声明props属性，允许子组件接收并处理属性。$listeners则包含父组件的事件监听器，使子组件能够监听并响应事件。这两个属性可以一起使用，以实现更加灵活和可复用的组件设计。

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

在Vue.js中， $a tt rs 和$ listeners是两个特殊的属性，用于在组件中处理父组件传递的属性和事件监听。它们提供了一种简洁而强大的方式来处理组件之间的通信和交互。

$attrs属性:
$attrs属性是一个对象，包含了父组件传递给子组件但子组件没有显式声明的props属性。它允许子组件接收和处理父组件传递的属性，而无需在子组件中显式声明这些属性。

下面是一个示例，展示了如何在子组件中使用$attrs属性：

// 父组件
<template>

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

JhzDev

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

$attrs

芳草萋萋鹦鹉洲哦

02-22

535

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

Vue祖孙组件之间的通信---------$attrs、$listeners详解

yiyueqinghui的博客

10-29

1164

$attrs 功能：实现当前组件的父组件向当前组件的子组件通信说明：$attrs是一个对象，包含了当前组件的父组件传递给当前组件的所有的属性绑定 (当前组件props声明的属性除外、父组件上绑定的class 和 style 除外) 编码 //parent.vue 当前组件的父组件 <SonComponent class="box" text="1组件" ></SonComponent> //son.vue 当前组件 <GrandSonComponen

1 条评论您还未登录，请先登录后发表或查看评论

js中修改$attrs

qq_51389137的博客

10-12

227

新定义一个响应式变量用v-module和attrs绑定在统一哥组件上（子），修改这个变量的值。$attrs是只读属性在html中绑定在bind上，修改通过双向绑定修改。

VUE.JS中$attrs、inheritAttrs记录

忽胖忽瘦的博客

01-21

701

组件传值$attrs 数据在标签渲染里控制inheritAttrs 组件传值$attrs vue中向子级组件传值，最常用到的还是v-bind:param="obj"，子级组件通过props属性接收。但是当值需要传递很多层时，props传值就显得过于麻烦。这个时候就可以使用$attrs向下传值。用法如下: 总结： $attrs中保存的是父组件通过v-bind指令传下来的值，这些值不包含prop...

vue.js之多层父子组件通信方式一($attrs和$listeners)

陈小陈的博客

01-03

1245

多层父子组件通信通信方式一（爷爷和孙子通话） $attrs，包含了父组件作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)；当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。 $listeners，包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器，它可以通过v-on="$listeners" 传入内部组

组件传值，传输对象里面含有路径，组件接收未显示

weixin_49295874的博客

10-15

183

父组件使用子组件 <div>单击图片预览，点击遮罩层可关闭</div> <preview :name="name"></preview> <script lang='ts'> import { defineComponent, reactive, toRefs, SetupContext } from "vue"; interface Name { [key: string]: string; } interface Data {

Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)

08-27

inheritAttrs、$attrs 和 $listeners 是 Vue 2.4 版本中新增的三个属性。inheritAttrs 属性可以控制父组件的非 prop 属性是否绑定到子组件的根元素上。$attrs 属性是一个对象，存放了父组件中不作为 prop 的特性绑定...

详解关于element el-button使用$attrs的一个注意要点

10-17

标题中提到的主题是“element el-button使用$attrs的一个注意要点”，这涉及到Vue.js框架中关于组件属性传递和继承的具体使用场景。在Vue中，$attrs代表的是父作用域中不作为组件自定义属性所定义的属性集合，即那些...

Vue.js 和 Vue 3 全面详解指南

weixin_51040479的博客

03-26

1616

Vue.js（简称 Vue）是一个用于构建用户界面的渐进式 JavaScript 框架。

$attrs 和 $listeners (vue2&&vue3)

每天都要努力学习哦~~

10-09

8385

listeners。

angularJS 中$attrs方法使用指南

12-12

这里给大家分享的是一个angularJS 中$attrs方法的使用示例：代码如下: <!doctype html> <html> <head> <meta charset=”utf-8″> <title> 无标题文档 </title> [removed] [removed] [removed]

（2020-12-29）谈谈vue.js中inheritAttrs和$attrs的用法

Missjuzi的博客

12-29

656

inheritAttrs和$attrs的简介首先我们可以先参考一下官方文档中对它们两个的介绍： attrs的介绍包含了父作用域中不作为prop被识别(且获取)的特性绑定(class和style除外)。当一个组件没有声明任何prop时，这里会包含所有父作用域的绑定(class和style除外)，并且可以通过v−bind="attrs" 传入内部组件——在创建更高层次的组件时非常有用。 inheritAttrs的介绍默认情况下父作用域的不被认作 props 的特性绑定 (attr..

多层组件传值$listeners/$attrs和获取组件$ parent/$root/$children/$refs

m0_59345890的博客

09-07

585

在组件中传值，在父子级组件很好就实现了，但是如果第一层的组件向第六层或者更高的层次传值时，我们就非常难办了，在我们以前学习的知识来实现。可以在组件或者原生元素绑定ref属性(类似于id)，在通过$refs来获取对应的组件或元素节点，只会在组件渲染完成之后生效，并且它们不是响应式的。尽管框架为我们提供了多层组件传值的方法，但是我们还是要一层一层的去配置v-bind="$attrs"和v-on="$listeners"。我们来三个组件来演示父组件向孙组件传数据，孙数据向父组件传数据。

原生js中attributes属性

yangyanqin2545的博客

03-13

1197

原生js中attribute属性 <div id="box" title="盒子" class="big"></div> <script> let box = document.getElementById('box'); let attrs = box.attributes; console.log(attrs); /* NamedNodeMap 0: id 1: title 2: class cl

JavaScript 属性 (Attributes)：了解和使用

VvpApplescript的博客

09-17

1748

属性是 HTML 元素的特性，它们提供了关于元素的更多信息。在 JavaScript 中，我们可以使用属性为元素添加、修改或删除这些特性。属性可以包含各种类型的值，如字符串、数字、布尔值等。JavaScript 中的属性分为两种类型：内置属性 (Built-in Attributes) 和自定义属性 (Custom Attributes)。内置属性是 HTML 元素默认就具备的属性，比如idclasssrc等。这些属性可以通过 JavaScript 直接访问和操作，以实现对元素的控制和交互。

浅谈js里的attributes和与之相关的一些属性

Tank_in_the_street的博客

10-07

8376

在前端里，想要对静态的HTML变得更加的动态，就必须要对HTML的dom进行操作，dom犹如一个树，树的最底层是文档节点，这个节点顺着上来就到了html节点，也就是根节点。这个根节点有两个分支，一个是body，另一个是head。head里面有很多个子节点，必须要有的是title节点，其他常见的有meta、style、link等，而body里面也有无数个节点。就拿body里面的p节点来讲，里面就有文

[JS] 第十二课：正则表达式

qq_43519498的博客

01-15

163

1. 正则表达式的创建直接量创建 /pattern/attrs 对象创建 new RegExp(pattern,attrs) 参数： pattern：描述性质的字符串 attrs：修饰符 2. 正则表达式语法直接量字符字母和数字 /123abc/ //--->代表字母或数字本身非字母的字符匹配符号含义 \o NULL \t...

Vue中 $attrs、$listeners使用和理解

ArtGhosts的博客

10-09

884

Vue中 $attrs、$listeners使用和理解

vue笔记2

qq_37682086的博客

02-15

269

vue笔记2 事件监听listeners属性与$attrs属性 **attrs属性∗∗‘attrs属性** `attrs属性∗∗‘attrs属性包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过v-bind=“this.$att...

`$attrs` 与 `$listeners` 如何配合使用实现双向透传？