Vue Options API怎么使用 $attrs 将未识别的属性透传给根元素-Vue.js-PHP中文网

$attrs 默认自动继承到单根元素，但多根或需过滤/透传至非根元素时须设 inheritAttrs: false 并显式 v-bind。

vue options api怎么使用 $attrs 将未识别的属性透传给根元素

在 Vue Options API 中，$attrs 是一个对象，包含父组件传入但未被 props 声明、也未被 v-on（如 @click）显式监听的属性和事件。它默认会**自动继承到组件的根元素上**，但如果你需要手动控制透传（比如透传给非根元素、或过滤/合并属性），就得显式使用 $attrs。

确认 $attrs 默认行为

Vue 2.4+ 和 Vue 3（Options API 模式）中，只要组件模板只有一个根元素，且没有显式绑定 v-bind="$attrs"，$attrs 仍会自动“冒泡”到该根元素——这是默认继承（attribute fallthrough）。但一旦你写了 v-bind="$attrs"，就等于接管了透传逻辑，此时默认继承会被禁用。

如果组件模板只有一个 <div>，没写 v-bind="$attrs"，class、id、data-*、自定义属性等会自动加到这个 <div> 上
如果写了 <div v-bind="$attrs">，那所有未声明的属性都会被绑定到这个 <div>，但其他子元素不会自动获得
如果组件有多个根节点（如多个并列元素），$attrs 不会自动应用，必须手动 v-bind 到目标元素

手动透传 $attrs 到根元素（显式控制）

当你想明确控制哪些属性透传、或需要合并已有属性时，用 v-bind="$attrs" 最直接：

<template>
  <input
    type="text"
    v-bind="$attrs"  <!-- 把所有未声明的 attr/event 都透传过去 -->
    :value="value"
    @input="$emit('input', $event.target.value)"
  />
</template>

这样，父组件传的 placeholder、disabled、data-testid，甚至 @focus、@blur 都会落到 <input> 上。

vue-composition-api-best-practices

Vue 3 组合式 API 与

相关专题

python是前端还是后端

Python属于前端也属于后端，其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容，供大家免费下载体验。

2503

2023.08.11

前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍：1、WebSocket，它可以在客户端和服务器之间建立持久连接，实现实时的双向通信，前端可以使用 WebSocket API来创建WebSocket连接，并通过发送和接收消息来实现即时通讯；2、Long Polling，是一种模拟实时通信的技术等等。

5423

2023.10.09