Опції: Різне
name
Явне оголошення відображуваного імені компонента.
Тип
tsinterface ComponentOptions { name?: string }
Подробиці
Ім'я компонента використовується для наступного:
- Рекурсивне посилання на себе у власному шаблоні компонента
- Відображення в дереві перевірки компонентів Vue DevTools
- Відображення в попередженнях при трасуванні компонентів
Коли ви використовуєте одно-файлові компоненти, компонент уже визначає свою назву з назви файлу. Наприклад, файл із назвою
MyComponent.vue
матиме передбачувану відображувану назву "MyComponent".Інший випадок полягає в тому, що коли компонент зареєстровано глобально за допомогою
app.component
, глобальний ідентифікатор автоматично встановлюється як його ім’я.Параметр
name
дозволяє вам замінити виведене ім’я або явно вказати ім’я, якщо воно не може бути виведено (наприклад, коли не використовуються інструменти збірки або вбудований компонент, що не є одно-файловим компонентом).Є один випадок, коли
name
є явно необхідним: під час зіставлення з кешованими компонентами в<KeepAlive>
через його реквізитиinclude / exclude
.Примітка
Починаючи з версії 3.2.34, одно-файловий компонент, який використовує
<script setup>
, автоматично визначатиме свій параметрname
на основі імені файлу, усуваючи потребу вручну оголошувати назву, навіть якщо використовується з<KeepAlive>
.
inheritAttrs
Контролює, чи слід увімкнути прохідну поведінку компонента за промовчанням.
Тип
tsinterface ComponentOptions { inheritAttrs?: boolean // за промовчанням: true }
Подробиці
За промовчанням, прив'язки атрибутів батьківської області, які не розпізнаються як реквізити є "прохідними". Це означає, що коли у нас є однокореневий компонент, ці прив'язки будуть застосовані до кореневого елемента дочірнього компонента як звичайні атрибути HTML. Під час створення компонента, який є обгорткою для цільового елемента або іншого компонента, це не завжди може бути бажаною поведінкою. Встановивши для
inheritAttrs
значенняfalse
, цю поведінку за промовчанням можна вимкнути. Атрибути доступні через властивість екземпляра$attrs
і можуть бути явно пов'язані з некореневим елементом за допомогоюv-bind
.Приклад
При оголошенні цього параметра в компоненті, який використовує
<script setup>
, потрібен окремий блок<script>
:vue<script setup> defineProps(['label', 'value']) defineEmits(['input']) defineOptions({ inheritAttrs: false }) </script> <template> <label> {{ label }} <input v-bind="$attrs" v-bind:value="value" v-on:input="$emit('input', $event.target.value)" /> </label> </template>
Також до вашої уваги: Прохідні атрибути
components
Об’єкт, який реєструє компоненти, які будуть доступні для екземпляра компонента.
Тип
tsinterface ComponentOptions { components?: { [key: string]: Component } }
Приклад
jsimport Foo from './Foo.vue' import Bar from './Bar.vue' export default { components: { // скорочення Foo, // зареєструватися під іншим ім'ям RenamedBar: Bar } }
Також до вашої уваги: Реєстрація компонентів
directives
Об’єкт, який реєструє директиви, які будуть доступні для екземпляра компонента.
Тип
tsinterface ComponentOptions { directives?: { [key: string]: Directive } }
Приклад
jsexport default { directives: { // вмикає v-focus у шаблоні focus: { mounted(el) { el.focus() } } } }
template<input v-focus>
Також до вашої уваги: Користувацькі директиви