未在props中声明的属性

两个西柚呀2025-10-27 2:35

我们用一个自定义表单input组件实现v-model来解释这个问题

javascript 复制代码

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"
      >
    </label>
  `
})

javascript 复制代码

<base-input
  label="Username:"
  v-model="username"
  required
  placeholder="Enter your username"
></base-input>

设置 inheritAttrs: false：关闭默认的根元素属性继承行为 ，避免 $attrs 里的属性被自动绑定到根元素 <label> 上。
手动写 v-bind="$attrs" 并放在 <input> 上：明确告诉 Vue，把 $attrs 里的属性绑定到 <input> 上（这才是这些属性真正该去的地方）。

默认情况下（即不设置 inheritAttrs: false 时）：

父组件传递给子组件、且子组件未在 props 中声明的属性（也就是 $attrs 里的内容），会自动绑定到子组件的根元素上。