Отключение наследования атрибутов
Если вы не хотите, чтобы корневой элемент компонента наследовал атрибуты, вы можете установить inheritAttrs: false
в опциях компонента. Например:
Vue.component('my-component', {
inheritAttrs: false,
// ...
})
Это может быть особенно полезно в сочетании со свойством экземпляра $attrs
, которое содержит имена атрибутов и значения, переданные компоненту, например:
{
required: true,
placeholder: 'Введите имя пользователя'
}
С помощью inheritAttrs: false
и $attrs
вы можете вручную определять к какому элементу должны применяться атрибуты, что часто требуется для базовых компонентов:
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>
`
})
Обратите внимание, что опция inheritAttrs: false
не влияет на биндинги style
и class
.
Этот шаблон позволяет вам использовать базовые компоненты больше как обычные HTML-элементы, не беспокоясь о том, какой элемент будет у него корневым:
<base-input
v-model="username"
required
placeholder="Введите имя пользователя"
></base-input>
Last updated
Was this helpful?