$attrs 未声明属性集合

最后更新：2026-10-22

$attrs 汇集父组件传入但未被 props 声明的属性，配合 inheritAttrs: false 精确分发。

📝 语法

export default {
  inheritAttrs: false,
  template: "<input v-bind=\"$attrs\">"
}

value	无参数：读取属性集合（含 class/style 与事件监听）

返回值：只读对象

修改下面的代码，在预览区实时查看效果：

输出：

输入框带 placeholder 与 type，标签显示「邮箱」。

⚠️ 注意 $attrs 只读：修改会警告且不影响父组件。

ℹ️ 说明 它包含事件监听器：v-bind="$attrs" 会把 @focus 之类一起透传下去。

💡 提示 组合式 API 用 useAttrs() 获取同一集合。

更多案例即将上线。

Q 和 props 的分界？

A 声明在 props 里的进 props；其余全在 $attrs。

Q class/style 在里面吗？

A 在，但它们会与组件自身的合并而非覆盖。

Q 为什么有时属性不生效？

A 多根元素且没写 v-bind="$attrs" 时属性无处落。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。