inheritAttrs 控制属性透传

最后更新：2026-10-22

inheritAttrs 设为 false 时，未声明的属性不再自动落在根元素上，配合 $attrs 可精确分发到内部元素。

📝 语法

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

value	布尔值（默认 true）

返回值：无返回值

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

输出：

placeholder 与 class 落在真正的 input 上（而非外层 div）。

💡 提示 包装型组件（输入框、按钮）常用这个组合：inheritAttrs: false + v-bind="$attrs"。

ℹ️ 说明 多根元素组件默认不透传，必须手动指定落点。

更多案例即将上线。

Q 为什么根元素上多了奇怪属性？

A 那是默认透传：父组件传了组件没声明为 prop 的属性。

Q 多根组件需要设置吗？

A 不需要设置 false，但必须手动 v-bind="$attrs" 否则属性无处可去（并有警告）。

Q class 也算透传属性吗？

A 算：class/style 会与组件自身的合并。

Web-Tutorial 技术团队

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