Vue 中 props 和 attrs 概念与区别

最新推荐文章于 2025-09-28 11:11:37 发布
原创 最新推荐文章于 2025-09-28 11:11:37 发布 · 5k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入解析Vue中Props与Attrs的区别与应用，探讨如何在父组件向子组件传递属性时，合理使用Props与Attrs，确保代码清晰与高效。同时，讲解如何控制属性继承与自定义属性的管理。

Vue 中的区别：
Vue中的 a t t r s 和 attrs和 attrs和listener
Vue-- a t t r s 与 attrs与 attrs与listeners的详解

在 vue 中，对于在父组件中传递的属性，

若在子组件中使用@Prop声明了属性如@Prop name，则 name 属性只会在 this. p r o p s 中 出 现 ， 不 会 出 现 在 t h i s . props 中出现，不会出现在 this. props中出现，不会出现在this.attrs 中；

若在子组件中没有使用@Prop声明属性，则属性会默认在 this. a t t r s 中 ， 不 会 出 现 在 t h i s . attrs 中，不会出现在 this. attrs中，不会出现在this.props 中；

故一般用 this.$attrs 接收处理没有用 @Prop 声明的属性，但一般不推荐这样，尽量使用 @Prop 声明所有自定义的属性，便于管理。

在 html 中的区别：
HTML中的attribute属性和JavaScript中的property属性的详解以及区别

props 是父类向子类传递并且需要子类主动接收的属性；

attrs 默认是父类传递到子类根元素的属性，子类不用主动接收，会直接放在子类根元素上。

而 attrs 的这种默认行为，可以通过设置 inheritAttrs 到 false，这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例属性 a t t r s 可 以 让 这 些 特 性 生 效 ， 且 可 以 通 过 v − b i n d （ v − b i n d = " attrs 可以让这些特性生效，且可以通过 v-bind （v-bind=" attrs可以让这些特性生效，且可以通过v−bind（v−bind="attrs"）显性的绑定到非根元素上。

Vue - $attrs 的多种用法
KwyxLibrary的博客
10-05 417
中一个非常有用的属性，它可以方便地传递父组件中未被子组件识别的属性。通过传递所有属性、过滤不需要的属性以及传递事件处理函数，我们可以灵活地在组件之间传递数据并实现更强大的组件通信。$attrs属性最常见的用法是将父组件中的所有属性传递给子组件。这在开发过程中非常实用，因为它允许我们将父组件的属性传递给子组件，而无需在子组件中显式声明这些属性。是一个非常有用的属性，用于传递父组件中未被子组件所识别的属性。它提供了一种方便的方式来在组件之间传递数据，使得组件的通信更加灵活和可扩展。在上面的示例中，父组件。
Vue3中的常见组件通信之$attrs
m0_63165331的博客
06-09 2658
本文讲述vue3中间组件通信$attrs的用法。
Vue3 - $attrs 的几种用法（1个或多个根元素、Options API 和 Composition API）
热门推荐
weixin_39415598的博客
05-30 1万+
theme: smartblue 持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情 本文简介 点赞 + 关注 + 收藏 = 学会了 使用 Vue 开发时，肯定会接触到 组件 的概念，无可避免的也会接触到 组件通讯 的概念。 组件通讯的方式有很多种，我在 《Vue3 过10种组件通讯方式》 一文中粗略罗列了 Vue3 常用的组件通讯方法。 ...
attrs，一个了不起的 Python 库！
涛哥聊Python
12-25 3734
attrs提供了多种预定义的验证器，方便进行常见的验证操作。例如，使用@attr.s# 创建对象# 修改属性值（会引发异常）# traffic_light.color = "blue" # 会抛出 ValueError这有助于确保属性值的合法性，提高代码的稳健性。attrs是一个在 Python 类定义中提供简洁、强大功能的库。通过声明式的语法，attrs简化了类的定义，大大减少了样板代码的编写。本文深入介绍了attrs的多个方面，包括基本用法、验证器、不可变实例、元数据、装饰器扩展、属性转换器等。
开源库入门教程：attrs - 让Python类构建更优雅
最新发布
2501_93501684的博客
09-28 1606
Python类定义神器attrs库：告别样板代码，提升开发效率 attrs库是Python中用于简化类定义的开源工具，它通过声明式语法自动生成__init__、__repr__等样板代码。相比传统类定义方式，attrs能减少90%的重复代码量，同时支持类型提示、属性验证、默认值设置等高级功能。本文介绍了attrs的核心用法，包括基础类定义、属性验证、不可变类实现等特性，并比较了与标准库dataclasses的差异。通过实际案例展示了如何使用attrs构建API响应类，体现了其在提高代码可读性和减少错误方面的
Vue3: 透传的说明 + Props和 Attrs的区别
EvanYYY1的博客
05-31 2632
Vue3 透传和porps的区别
vue props和attrs
冰雪为融的博客
05-10 997
vue3 props 要先声明才能取值，attrs不用声明直接使用（$attrs 包含 class and style attribute）props 不包含事件，attrs包含 props 支持 String 以外的类型，attrs只有 String 类型 props 没有声明的属性，会在 attrs 里，若在 props 内声明了该属性，那么 attrs 里就不会出现该属性 vue2与vue3的不同 包含所有父作用域的绑定 (class 和 style 除外) props 不包含事件，attrs
Vue vm.$attrs使用场景详解
10-15
`vm.$attrs` 是Vue实例的一个属性，它包含了父作用域中未被识别（即未声明为prop）的绑定属性，除了`class`和`style`。当一个组件没有声明任何prop时，`vm.$attrs`会包含所有父作用域的绑定属性（除了`class`和`...
Vue为什么要谨慎使用$attrs与$listeners
10-14
首先，我们要了解为什么在Vue组件中要谨慎使用$attrs与$listeners。主要原因是它们会使子组件对祖先组件的依赖变得隐晦，如果祖先组件的属性发生变化，那么所有使用了$attrs的子组件也可能会触发更新，即使这些属性...
vue中通过使用$attrs实现组件之间的数据传递功能
10-16
`$attrs`是在Vue 2.4版本中引入的新特性，它包含父组件传递的所有未被识别为prop的属性绑定（除了`class`和`style`）。这意味着，即使子组件没有声明props，也可以通过`$attrs`接收并传递来自父组件的数据。 通常，...
Vue组件通信$attrs、$listeners实现原理解析
10-14
`$attrs` 是 Vue 中的一个对象，它包含了父组件中除 `class` 和 `style` 之外的所有未被声明为 prop 的属性绑定。这意味着，当你在子组件中没有明确声明某个 prop 时，父组件传递给子组件的属性将自动被收集到 `$...
vue3 组件传值之 props 与 attrs 的区别
hsany330的专栏
02-16 2737
最近在学习 vue3，整理了一些学习笔记，如果有人看到，并发现我有写的不对的地方，欢迎指正~ 用过 vue 组件传值的小伙伴都知道 props 这个属性，而 $attrs 属性可以看做 props 的加强版，用来简化 vue 组件传值，那么这两个属性具体有什么区别呢？ 先说结论，区别如下： 1、props 要先声明才能取值，attrs 不用先声明 2、props 声明过的属性，attrs 里不会再出现 3、props 不包含事件，attrs 包含 4、props 支持 string 以外的类型，
Vue3 props和attrs对比
XiaoPan
08-15 2810
props V.S. attrs props 要先声明才能取值，attrs不用先声明 props 不包含事件，attrs包含 props 支持 String 以外的类型，attrs只有 String 类型 props 没有声明的属性，会在 attrs 里，若在 props 内声明了该属性，那么 attrs 里就不会出现该属性 ...
props和attrs
小丑鱼家的猪猪
11-02 643
attrs <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g
vue中$attrs，$props，$listener
axzzy的博客
10-10 414
在子类组件的选项中设置：inheritAttrs:false，组件的根元素就会取消继承，绑定事件无效。props”，v-on="$listeners"也就是把之前父组件那里给它的属性再全部传到它的子组件。，而通常，我们是想在上绑定事件，所以要取消事件，然后再手动绑定到上。以上例子中，click、focus事件的作用范围是组件的根结点。props = 在使用组件时定义的所有属性，不包括事件。：当前组件从父组件那里接收的参数，通俗的讲和。那么在当前组件中使用v-bind=“在vue中父类在使用子类组件时，
$attrs props
qq_25919495的博客
07-18 216
$attrs 01: 获取父组件,上面的属性(不包括class,style) 02: prop父组件传递给子组件的数据 A根 B子组件 C孙子组件 C => 获取A根传递的数据 <根A :data1='数据1' :data2='数据2' > </根A > <子B v-bind='$attrs'> </子B > 子组件B: p...
Vue的props和$attrs用法
大道至简
12-08 3407
当然这个$attrs是vue2.4才推出的，为了简化父组件和孙组件的传值： &amp;amp;lt;child-2 v-bind=”$attrs”/&amp;amp;gt; 真的是相当方便！ 注：不可滥用，如果是明确的属性还是要声明的，否则代码会越来越难维护。 ...
vue的props传值以及$attrs传值
qq_38402659的博客
05-11 945
props传值： 子组件必须通过props注册好数据例如 props:[‘chuan’] 父组件在标签中放入属性，如果属性为动态数据，需要用冒号， $attrs传值 该数据没有在props中注册过，注意是没有注册过。 在子元素中通过$attrs[‘data’]来访问这个数据 ...
vue2 $attrs和vue3 $attrs用法和区别
03-27
<think>嗯，用户问的是Vue2的$attrs和Vue3的$attrs的用法和区别。我需要先回忆一下这两个版本中attrs的行为有什么不同。 首先，Vue2中的$attrs包含了父作用域中不作为prop被识别（且获取）的特性绑定（class和style除外）。也就是说，如果子组件没有在props里声明某个属性，这个属性就会出现在$attrs里。在Vue2中，当子组件使用v-bind="$attrs"时，这些属性会应用到子组件的根元素上。但是，如果子组件的根元素已经有了相同的属性，父组件传过来的值会覆盖子组件本身的属性。不过，在Vue2里，如果子组件里嵌套了另一个组件，就需要手动通过v-bind="$attrs"传递下去，否则属性不会自动传递到更深层的子组件。 然后是Vue3的变化。Vue3中的$attrs现在包含了所有传递给组件的属性，包括class和style。这点和Vue2不同，Vue2是排除这两个的。另外，Vue3在继承父组件传递的属性时，如果子组件的根元素已经有相同的属性，父组件的属性会和子组件的合并，而不是覆盖。比如，父组件传了一个class="parent-class"，子组件根元素有class="child-class"，结果会是两者的合并。这在Vue2里是不会发生的，Vue2里父组件的会覆盖子组件的。 还有，Vue3中的v-bind="$attrs"现在会将所有属性（包括事件监听器）传递到子组件，而Vue2中事件监听器是在$listeners里的，需要单独处理。Vue3把$listeners移除了，合并到了$attrs里，这样在传递时更方便，不需要同时绑定$attrs和$listeners。 另外，在Vue3中，如果组件有多个根节点（Fragment特性），需要显式绑定$attrs，否则会有警告。而Vue2中组件只能有一个根节点，所以自动应用到根元素上没问题，但Vue3允许多个根节点，这时候就需要开发者自己决定在哪里绑定$attrs。 举个例子，比如在Vue2中，子组件接收父组件的placeholder属性，但如果没有声明为prop，就会在$attrs里，然后通过v-bind="$attrs"传递给input元素。而在Vue3中，同样的情况，但class也会被包含，并且如果子组件有多个根节点，必须手动绑定，否则不会自动应用。 可能用户在使用Vue2升级到Vue3时遇到了问题，比如样式不合并或者事件监听器失效，这时候需要了解$attrs的变化。用户可能需要知道如何正确传递属性和处理多个根节点的情况，以及为什么在Vue3中class和style会被包含在$attrs里。 总结一下，Vue3的$attrs更全面，包含所有属性，合并行为改变，事件监听器合并到attrs，以及多根组件需要显式绑定。这些区别需要详细说明，帮助用户避免迁移中的常见问题。</think>好的！我将从**用法对比**和**核心区别**两个方面，帮你梳理 Vue2 和 Vue3 中 `$attrs` 的异同。 --- ### 一、基础概念 `$attrs` 是 Vue 用于接收**父组件传递的非 prop 属性**的容器（例如 `class`、`style`、原生事件等）。它在组件层级嵌套时，常用于透传属性。 --- ### 二、Vue2 中的 `$attrs` #### 1. 特性 - **排除已声明的 props**：父组件传递的属性若未被 `props` 接收，则进入 `$attrs` - **不包含 `class` 和 `style`**：这两者会被单独提取到组件根元素上 - **需要手动透传**：若要将属性传递给更深层子组件，需显式使用 `v-bind="$attrs"` #### 2. 代码示例 ```html <!-- 父组件 --> <ChildComponent id="parent-id" class="parent-class" data-test="123" /> <!-- 子组件 (ChildComponent.vue) --> <template> <div> <GrandChild v-bind="$attrs" /> </div> </template> <script> export default { // 未声明 props: ['dataTest'] } </script> ``` - `$attrs` 内容：`{ id: "parent-id", data-test: "123" }` - `class="parent-class"` 自动附加到子组件根元素 `<div>` --- ### 三、Vue3 中的 `$attrs` #### 1. 核心变化 - **包含 `class` 和 `style`**：不再自动附加到根元素，而是进入 `$attrs` - **合并代替覆盖**：若子组件根元素已有同名属性，Vue3 会**合并值**而非覆盖 - **移除 `$listeners`**：事件监听器合并到 `$attrs` 中（如 `@click`） - **多根节点需显式绑定**：若组件有多个根元素，需手动指定 `$attrs` 位置 #### 2. 代码示例 ```html <!-- 父组件 --> <ChildComponent id="parent-id" class="parent-class" @click="handleClick" /> <!-- 子组件 (ChildComponent.vue) --> <template> <div :class="$attrs.class"> <GrandChild v-bind="$attrs" /> </div> </template> <script> export default { // 需要手动处理 class } </script> ``` - `$attrs` 内容：`{ id: "parent-id", class: "parent-class", onClick: handleClick }` --- ### 四、关键区别总结 | **特性** | **Vue2** | **Vue3** | |-------------------------|-----------------------------------|-----------------------------------| | `class` & `style` | 不包含在 `$attrs`，自动附加根元素 | 包含在 `$attrs`，需手动处理 | | 同名属性处理 | 父级覆盖子级 | 合并父级和子级的值 | | 事件监听器 | 存放在 `$listeners` | 合并到 `$attrs` 中 | | 多根组件 | 不支持多根组件 | 必须显式指定 `v-bind="$attrs"` | --- ### 五、使用建议 1. **Vue2 迁移到 Vue3**： - 检查 `class` 和 `style` 是否被正确处理 - 替换 `$listeners` 为 `$attrs` 2. **透传第三方组件**： ```html <!-- Vue3 中透传所有属性和事件 --> <template> <ThirdPartyComponent v-bind="$attrs" /> </template> ``` 3. **合并根元素属性**： ```html <!-- 合并父级和自身的 class --> <div :class="[localClass, $attrs.class]"></div> ``` --- 理解这些差异能帮助你更精准地控制组件间的属性传递！如果有具体场景问题，可以进一步探讨。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值