未在props中声明的属性

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

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

<base-inputlabel="Username:"v-model="username"requiredplaceholder="Enter your username"
></base-input>

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

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

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