Vue3中v-bind=“$attrs“用法讲解

原创 已于 2025-06-14 19:44:52 修改 · 1.5k 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

于 2025-06-14 16:31:46 首次发布

在 Vue 3 中，v-bind="$attrs" 是一个非常重要的特性，它用于处理组件间的属性透传。让我详细解释它的含义和用法：

一、$attrs 是什么

$attrs 是 Vue 组件实例上的一个特殊属性，它包含：

  1. 父组件传递给子组件但未被声明为 props 的属性

  2. 包括 HTML 属性、自定义属性、DOM 事件监听器

  3. 不包含：

    • 已声明的 props

    • class 和 style（在 Vue 3 中它们有单独的处理机制）

二、v-bind="$attrs" 的作用

html

复制

下载

运行

<child-component v-bind="$attrs"></child-component>

这句代码的意思是：将当前组件接收到的所有未声明属性，透传给内部的子组件。

三、使用场景详解

场景 1：创建高阶组件（属性透传）

vue

复制

下载

<!-- Parent.vue -->
<template>
  <ChildComponent 
    title="父组件标题" 
    data-id="123" 
    @custom-event="handleEvent"
    class="parent-class"
  />
</template>

<!-- ChildComponent.vue -->
<template>
  <div>
    <!-- 将未声明的属性透传给孙子组件 -->
    <GrandChild v-bind="$attrs" />
  </div>
</template>

<script setup>
// 只声明了 title 作为 prop
defineProps(['title'])
</script>

<!-- GrandChild.vue -->
<template>
  <div>
    <!-- 将接收到的属性绑定到根元素 -->
    <div v-bind="$attrs">孙子组件</div>
  </div>
</template>

结果：

  • title 被 ChildComponent 作为 prop 接收

  • data-id 和 @custom-event 透传到 GrandChild

  • GrandChild 的根元素会获得：data-id="123" 和 custom-event 监听器

场景 2：禁用默认继承

vue

复制

下载

<script setup>
defineOptions({
  inheritAttrs: false // 禁用默认的属性继承
})
</script>

<template>
  <div class="wrapper">
    <!-- 手动控制属性绑定位置 -->
    <input v-bind="$attrs" />
  </div>
</template>

  • 默认情况下，未声明的属性会自动绑定到根元素

  • 设置 inheritAttrs: false 后，可以通过 v-bind="$attrs" 手动指定绑定位置

四、Vue 3 中的变化（对比 Vue 2）

特性Vue 2Vue 3
包含内容普通属性属性 + 事件监听器
class/style包含在 $attrs 中不包含在 $attrs 中
事件监听器在 $listeners 中合并到 $attrs 中
透传方式需要同时绑定 $attrs 和 $listeners只需绑定 $attrs

五、实际应用技巧

1. 组合式 API 中使用

vue

复制

下载

<script setup>
import { useAttrs } from 'vue'

const attrs = useAttrs()
console.log(attrs) // 包含所有未声明属性
</script>
2. 过滤特定属性

vue

复制

下载

<template>
  <div>
    <input v-bind="filteredAttrs">
  </div>
</template>

<script setup>
import { computed, useAttrs } from 'vue'

const attrs = useAttrs()

const filteredAttrs = computed(() => {
  const { class: _, style: __, ...rest } = attrs
  return rest
})
</script>
3. 多层透传

vue

复制

下载

<!-- 中间层组件 -->
<template>
  <ThirdPartyComponent v-bind="$attrs" />
</template>

这样可以将父组件的属性直接透传给第三方组件，无需在中间组件中声明

六、注意事项

  1. 事件监听器：在 Vue 3 中，事件监听器会作为 onXxx 属性出现在 $attrs 中

    js

    复制

    下载

    // $attrs 内容示例
{ 
  "data-id": "123",
  "onCustomEvent": () => {} // 事件监听器
}

  2. 与 class/style 的分离：

    vue

    复制

    下载

    <Child class="parent-class" style="color:red" />

<!-- 子组件中 -->
<div :class="$attrs.class" :style="$attrs.style">
  <!-- 其他内容 -->
</div>

    但更好的做法是直接使用 class 和 style 绑定

  3. 优先级：手动绑定的属性会覆盖 $attrs 中的同名属性

    vue

    复制

    下载

    <input v-bind="$attrs" placeholder="默认">
<!-- 如果 $attrs 中有 placeholder，会被覆盖为 "默认" -->

七、为什么需要这个特性

  1. 创建通用组件：当构建可复用的基础组件（如按钮、输入框）时

  2. 减少 props 声明：避免在中间组件中声明大量不必要的 props

  3. 与第三方库集成：将 Vue 组件作为原生 HTML 元素的包装器

  4. 保持组件接口灵活：允许父组件传递任意属性

总结

v-bind="$attrs" 是 Vue 组件通信的重要机制，它：

  1. 实现属性自动透传

  2. 配合 inheritAttrs: false 可精确控制属性绑定位置

  3. 在 Vue 3 中统一处理属性和事件

  4. 特别适合创建高阶组件和通用基础组件

合理使用这个特性可以大幅提高组件的可复用性和灵活性，减少不必要的 props 声明，保持组件接口的简洁性。

Vue 3 多层属性透传详解

在 Vue 3 中，多层属性透传是一种强大的功能，允许属性从父组件通过中间组件自动传递到深层子组件，而不需要在中间组件中显式声明这些属性。

核心概念

多层透传的核心是使用 v-bind="$attrs"：

  • $attrs 包含父组件传递但未被当前组件声明为 props 的所有属性

  • v-bind="$attrs" 将这些属性传递给子组件

  • 整个过程不需要中间组件知道或处理这些属性

基本透传示例

vue

复制

下载

<!-- ParentComponent.vue -->
<template>
  <MiddleComponent 
    title="父组件标题" 
    data-id="123" 
    @custom-event="handleEvent"
    class="parent-class"
  />
</template>

<script setup>
const handleEvent = (value) => {
  console.log('收到事件:', value);
};
</script>

vue

复制

下载

<!-- MiddleComponent.vue -->
<template>
  <div class="middle">
    <h2>中间组件</h2>
    <!-- 将属性透传给孙子组件 -->
    <GrandChildComponent v-bind="$attrs" />
  </div>
</template>

<script setup>
// 没有声明任何 props，所以所有属性都会进入 $attrs
</script>

vue

复制

下载

<!-- GrandChildComponent.vue -->
<template>
  <div class="grandchild">
    <h3>孙子组件</h3>
    <!-- 接收所有透传属性 -->
    <button @click="triggerEvent">触发事件</button>
    <p>接收到的标题: {{ $attrs.title }}</p>
    <p>接收到的数据ID: {{ $attrs['data-id'] }}</p>
  </div>
</template>

<script setup>
import { useAttrs } from 'vue';

const attrs = useAttrs();

const triggerEvent = () => {
  // 检查是否有自定义事件监听器
  if (attrs.onCustomEvent) {
    attrs.onCustomEvent('来自孙子组件的值');
  }
};
</script>

多层透传的关键点

1. 属性继承机制

  • 默认情况下，未声明的属性会自动绑定到组件的根元素

  • 设置 inheritAttrs: false 可以禁用此行为

vue

复制

下载

<!-- MiddleComponent.vue -->
<script>
export default {
  inheritAttrs: false // 禁用自动绑定到根元素
}
</script>

2. 精确控制绑定位置

禁用自动继承后，可以手动指定属性绑定位置：

vue

复制

下载

<!-- MiddleComponent.vue -->
<template>
  <div class="wrapper">
    <!-- 只将属性绑定到特定元素 -->
    <div class="header" v-bind="$attrs"></div>
    
    <!-- 传递到子组件 -->
    <GrandChildComponent v-bind="$attrs" />
  </div>
</template>

3. 属性过滤与修改

可以在传递前修改或过滤属性：

vue

复制

下载

<!-- MiddleComponent.vue -->
<template>
  <GrandChildComponent v-bind="filteredAttrs" />
</template>

<script setup>
import { computed, useAttrs } from 'vue';

const attrs = useAttrs();

const filteredAttrs = computed(() => {
  // 过滤掉 style 属性
  const { style, ...rest } = attrs;
  
  // 添加额外属性
  return {
    ...rest,
    'data-middle': '中间组件添加'
  };
});
</script>

4. 事件处理

Vue 3 中事件监听器包含在 $attrs 中：

vue

复制

下载

<!-- GrandChildComponent.vue -->
<template>
  <button @click="emitCustomEvent">触发事件</button>
</template>

<script setup>
import { useAttrs } from 'vue';

const attrs = useAttrs();

const emitCustomEvent = () => {
  // 检查是否有事件监听器
  if (attrs.onCustomEvent) {
    attrs.onCustomEvent('事件值');
  }
  
  // 更安全的写法
  const eventHandler = attrs.onCustomEvent;
  if (typeof eventHandler === 'function') {
    eventHandler('事件值');
  }
};
</script>

实际应用场景

1. 创建高阶组件 (HOC)

vue

复制

下载

<!-- WithLogging.js -->
<script setup>
import { onMounted } from 'vue';

const props = defineProps(['componentName']);

onMounted(() => {
  console.log(`组件 ${props.componentName} 已挂载`);
});
</script>

<template>
  <component v-bind="$attrs" />
</template>

vue

复制

下载

<!-- ParentComponent.vue -->
<template>
  <WithLogging 
    componentName="SpecialButton" 
    is="SpecialButton" 
    @click="handleClick"
  />
</template>

2. 包装第三方组件

vue

复制

下载

<!-- WrappedElInput.vue -->
<template>
  <el-input v-bind="$attrs" />
</template>

<script setup>
// 可以在这里添加通用逻辑
import { useAttrs } from 'vue';

const attrs = useAttrs();

// 设置默认placeholder
if (!attrs.placeholder) {
  attrs.placeholder = '请输入内容';
}
</script>

3. 表单字段组件

vue

复制

下载

<!-- FormField.vue -->
<template>
  <div class="form-field">
    <label v-if="label">{{ label }}</label>
    <input v-bind="$attrs" />
    <div class="error" v-if="error">{{ error }}</div>
  </div>
</template>

<script setup>
defineProps({
  label: String,
  error: String
});

// 禁用自动继承
defineOptions({
  inheritAttrs: false
});
</script>

注意事项

  1. 属性冲突：

    vue

    复制

    下载

    <ChildComponent v-bind="$attrs" title="新标题" />

    手动指定的属性会覆盖 $attrs 中的同名属性

  2. 性能考虑：

    • 透传大量属性可能影响性能

    • 对于静态属性，考虑直接传递而非透传

  3. 事件监听器：

    • Vue 3 中事件监听器以 onXxx 形式存在于 $attrs

    • 如 @custom-event 变为 onCustomEvent 属性

  4. 与 provide/inject 对比：

    特性多层透传provide/inject
    适用场景属性直接传递跨层级数据共享
    数据类型属性/事件任意响应式数据
    组件耦合较低较高
    灵活性仅限于属性传递更通用

调试技巧

使用组合式 API 检查 $attrs：

vue

复制

下载

<script setup>
import { useAttrs, onMounted } from 'vue';

const attrs = useAttrs();

onMounted(() => {
  console.log('接收到的属性:', attrs);
});
</script>

总结

多层属性透传是 Vue 3 中强大的组件通信机制：

  1. 使用 v-bind="$attrs" 传递未声明属性

  2. 通过 inheritAttrs: false 精确控制绑定位置

  3. 事件监听器自动包含在透传中

  4. 适合创建可复用组件和高阶组件

  5. 避免在中间组件中声明不必要的 props

合理使用多层透传可以：

  • 简化组件接口

  • 提高组件复用性

  • 减少不必要的 props 声明

  • 保持组件层级间的解耦

对于复杂的应用场景，可以结合 provide/inject 和事件总线等其他通信方式，构建灵活高效的组件架构。

 获取 $attrs 的内容

import { useAttrs } from "vue"; 

const attrs = useAttrs();
console.log("$attrs = ", attrs);

 输出打印

BillKu
关注
vue 爷孙组件通信传值v-bind=“$attrs“ v-on=“$listeners“
jieweiwujie的博客
10-17 1546
1 爷爷组件写法 <father2 :position="position" @sunYe='sunYe'></father2> <template> <div class="pluginAlertName"> <el-button type="" @click="FClick">爷爷给孙子发消息</el-button> 这是爷爷的页面：name:{{name}}--age:{{age}} .
在 Vue 中更优雅的封装第三方组件 v-bind=“$attrs“ v-on=“$listeners“
jieweiwujie的博客
07-18 2083
在 Vue 中更优雅的封装第三方组件 v-bind="$attrs" v-on="$listeners"
vue3 v-bind绑定属性 v-bind=“$attrs“
larea的博客
04-11 1673
父组件中传递的值，在子组件中可通过 v-bind="$attrs"来绑定。v-bind="$attrs"用于将父组件传递的所有非props属性绑定到子组件的根元素上。这样的好处是可以在子组件中使用父组件中的非props属性，不需要一个一个手动传递。动态绑定一个或多个attribute，也可以是组件的prop。
Vue3进阶＜5＞vue3中的$attrs的使用
qq_23918423的博客
11-14 7031
attrs$attrs 对象包含了除组件所声明的 props 和 emits 之外的所有其他 attribute，例如 class，style，v-on 监听器等等。
vue3 v-bind=“$attrs“ 的一些理解，透传 Attributes相关说明及事例说明
花花鱼的专栏
09-06 6603
vue3 透传 Attributes相关说明及事例说明
Vue3 - $attrs
g470641382的博客
10-13 1623
只有1个根元素的情况下，子组件中，没被。里传入的样式也被执行，文字变成红色了。接收的属性不会绑定到子组件的元素上。中的使用方法会稍微有一丢丢区别。所以在代码里就不需要再调用。里定义，但父组件又传过来的属性。不再要求只有一个根元素了。接收的属性，都会绑定在根元素上。接收的属性都被绑定到根元素上了。如果只希望绑定部分属性，可以单独写。组件通讯的基础，本文不会讲解。里接收的内容，全部都放到了。的值，可以在子组件中这样操作。当子组件有2个根元素时，没被。里，并且存在一个对象里面。接下来将分开讨论这3种情况。
Vue3中的常见组件通信之$attrs
m0_63165331的博客
06-09 2553
本文讲述vue3中间组件通信$attrs的用法。
vue中使用v-bind=“$attrs“进行多层组件的传值
m0_67402823的博客
03-09 3547
有如下的嵌套关系 <grandfather> <father> <grandson> </grandson> </father> </grandfather> 比如说在grandfather中传给了father一些props grandfather.vue <div> <father name="test" age="18" hobby="badminiton" grade="3" .
【Vue3】组件通信之$attrs
又言又语
08-04 1432
本文介绍 Vue3 中如何使用$attrs实现父组件向子组件的子组件传数据，即向其孙子组件传数据。父组件向子组件传数据，实现方案有：propsv-model$ref默认插槽 / 具名插槽子组件向父组件传数据propsv-model$parent自定义事件作用域插槽父组件与子组件的子组件互传数据，即与孙子组件互传数据$attrsproviderinject任意组件间传数据mittPinia$attrs的作用其实是对props。
vue3组件通信（5）——$attrs
weixin_50845028的博客
09-12 1365
存在三个组件： father child grandchildfather组件定义的响应式数据，可以通过props通信方式进行传递，child组件可以通过defineprops进行接收，但是当child组件不接收时，father组件传递的数据将被保存到 $attrs 中：father组件向子组件传递数据以后，子组件不接收将全部保存到 $attrs 中，子组件通过向孙组件传递 $attrs ，从而达到father向g
Vue3 中 $attrs 实现组件通讯的深度解析
m0_57836225的博客
02-23 1096
在 Vue3 的组件开发过程中，组件通讯是非常重要的一环。其中，$attrs为我们提供了一种便捷的非父子组件间的通讯方式，尤其适用于跨级组件间传递数据，这篇文章就来深入探讨$attrs的使用方式、适用场景，并结合具体代码示例进行说明。
vue3 v-bind=“$attrs“ 继承组件全部属性
jieyucx的博客
01-02 4602
vue3 v-bind="$attrs" 继承组件全部属性
vue3中的$attrs
m0_61265297的博客
06-22 281
作用是可以看到父组件给子组件传过的内容，子组件没有使用。
Vue中v-bind=“$attrs”的使用方法
weixin_44594219的博客
10-11 5977
Vue中v-bind=“$attrs”的使用方法
Vue3中的$attrs全解析
Jacklx888的博客
03-16 1118
大家好呀～今天给大家带来一个超级实用的Vue3技巧：如何使用`$attrs`实现组件间属性传递！如果你在开发过程中需要快速将父组件的属性透传给子组件，那么`$attrs`绝对是你的最佳选择！话不多说，直接开整～
Vue3 之 透传 Attributes，$attrs
zheng_jia_jun的博客
08-11 4351
透传 attribute” 指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。如果组件里面没有根节点，vue 将不会自动 attribute 透传行为，并且里面将会抛出一个警告，需要在组件中规定哪个组件使用 $attrs 透传 attribute。同样的 v-on 绑定事件，父组件跟 组件根组件都同时监听同一个事件的话，事件触发，对应监听的方法都会执行。现在我们想要父组件传递的属性，不在组件内根组件继承，在根组件里面的子组件基础。..
Vue3笔记-v-bind=“$attrs“
qq_46199553的博客
02-19 2671
v-bind="$attrs" 点击添加
Vue3 - $attrs 的几种用法（1个或多个根元素、Options API 和 Composition API）
热门推荐
weixin_39415598的博客
05-30 1万+
theme: smartblue 持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情 本文简介 点赞 + 关注 + 收藏 = 学会了 使用 Vue 开发时，肯定会接触到 组件 的概念，无可避免的也会接触到 组件通讯 的概念。 组件通讯的方式有很多种，我在 《Vue3 过10种组件通讯方式》 一文中粗略罗列了 Vue3 常用的组件通讯方法。 ...
前端vue2v-bind="$attrs"
最新发布
03-22
### Vue2 中 `v-bind="$attrs"` 的理解 `v-bind="$attrs"` 是 Vue.js 提供的一个特性，用于将父组件中的属性绑定到子组件上。当在父组件中未声明某些属性为 `props` 时，这些属性会自动成为 `$attrs` 对象的一部分[^1]。 #### 使用场景 如果在一个父组件（如 `FatherPage.vue`）中定义了一些属性但并未将其作为 `props` 声明，则可以通过 `v-bind="$attrs"` 将这些属性传递给更深层次的子组件（如 `ChildPage.vue`）。此时，在 `ChildPage.vue` 中可以访问这些属性并通过 `this.$attrs` 获取它们。 #### 实现方法 以下是实现该功能的具体代码示例： ```html <!-- FatherPage.vue --> <template> <child-page v-bind="$attrs"></child-page> </template> <script> import ChildPage from &#39;./ChildPage.vue&#39;; export default { components: { ChildPage }, }; </script> ``` 在这个例子中，假设 `FatherPage.vue` 并未在其 `props` 列表中显式声明任何属性，那么所有的非 `props` 属性都会被包含在 `$attrs` 中并传递至 `ChildPage.vue` 组件。 对于 `ChildPage.vue` 而言，它可以直接通过 `this.$attrs` 访问来自父级的所有未声明为 `props` 的属性。 --- ### 多层组件间的数据与事件通信 除了数据传递外，Vue 还支持通过 `$listeners` 来监听事件。这使得即使存在多层嵌套组件的情况下，也可以轻松完成跨层级的事件传播[^2]。 例如，假设有三个组件 A -> B -> C，其中 A 需要响应由 C 发起的某个自定义事件。这种情况下可以在中间件 B 上使用 `v-on="$listeners"` 完成事件桥接操作。 具体实现如下所示： ```html <!-- ComponentA.vue --> <template> <component-b></component-b> </template> <script> import ComponentB from &#39;./ComponentB.vue&#39;; export default { components: { ComponentB }, methods: { handleEventFromC(payload) { console.log(&#39;Received event with payload:&#39;, payload); } } } </script> ``` ```html <!-- ComponentB.vue --> <template> <component-c v-on="$listeners"></component-c> <!-- 关键点在这里 --> </template> <script> import ComponentC from &#39;./ComponentC.vue&#39;; export default { components: { ComponentC } } </script> ``` ```html <!-- ComponentC.vue --> <template> <button @click="sendEvent">Emit Event to Parent Chain</button> </template> <script> export default { methods: { sendEvent() { const data = &#39;Some Data&#39;; this.$emit(&#39;custom-event&#39;, data); // 自定义事件触发 } } } </script> ``` 上述结构展示了如何利用 `v-on="$listeners"` 和 `$emit()` 方法来构建灵活的父子组件交互机制。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值