Опції: Різне ​

name ​

Явне оголошення відображуваного імені компонента.

• Тип

  ts

  interface ComponentOptions {
    name?: string
  }

• Подробиці

  Ім'я компонента використовується для наступного:

  • Рекурсивне посилання на себе у власному шаблоні компонента
  • Відображення в дереві перевірки компонентів Vue DevTools
  • Відображення в попередженнях при трасуванні компонентів

  Коли ви використовуєте одно-файлові компоненти, компонент уже визначає свою назву з назви файлу. Наприклад, файл із назвою MyComponent.vue матиме передбачувану відображувану назву "MyComponent".

  Інший випадок полягає в тому, що коли компонент зареєстровано глобально за допомогою app.component, глобальний ідентифікатор автоматично встановлюється як його ім’я.

  Параметр name дозволяє вам замінити виведене ім’я або явно вказати ім’я, якщо воно не може бути виведено (наприклад, коли не використовуються інструменти збірки або вбудований компонент, що не є одно-файловим компонентом).

  Є один випадок, коли name є явно необхідним: під час зіставлення з кешованими компонентами в <KeepAlive> через його реквізити include / exclude.

  Примітка

  Починаючи з версії 3.2.34, одно-файловий компонент, який використовує <script setup>, автоматично визначатиме свій параметр name на основі імені файлу, усуваючи потребу вручну оголошувати назву, навіть якщо використовується з <KeepAlive>.

inheritAttrs ​

Контролює, чи слід увімкнути прохідну поведінку компонента за промовчанням.

• Тип

  ts

  interface ComponentOptions {
    inheritAttrs?: boolean // за промовчанням: true
  }

• Подробиці

  За промовчанням, прив'язки атрибутів батьківської області, які не розпізнаються як реквізити є "прохідними". Це означає, що коли у нас є однокореневий компонент, ці прив'язки будуть застосовані до кореневого елемента дочірнього компонента як звичайні атрибути HTML. Під час створення компонента, який є обгорткою для цільового елемента або іншого компонента, це не завжди може бути бажаною поведінкою. Встановивши для inheritAttrs значення false, цю поведінку за промовчанням можна вимкнути. Атрибути доступні через властивість екземпляра $attrs і можуть бути явно пов'язані з некореневим елементом за допомогою v-bind.

• Приклад

  vue

  <script>
  export default {
    inheritAttrs: false,
    props: ['label', 'value'],
    emits: ['input']
  }
  </script>
  
  <template>
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"
      />
    </label>
  </template>

  При оголошенні цього параметра в компоненті, який використовує <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>

  Починаючи з версії 3.3, ви також можете використовувати defineOptions безпосередньо в <script setup>:

  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 ​

Об’єкт, який реєструє компоненти, які будуть доступні для екземпляра компонента.

• Тип

  ts

  interface ComponentOptions {
    components?: { [key: string]: Component }
  }

• Приклад

  js

  import Foo from './Foo.vue'
  import Bar from './Bar.vue'
  
  export default {
    components: {
      // скорочення
      Foo,
      // зареєструватися під іншим ім'ям
      RenamedBar: Bar
    }
  }

• Також до вашої уваги: Реєстрація компонентів

directives ​

Об’єкт, який реєструє директиви, які будуть доступні для екземпляра компонента.

• Тип

  ts

  interface ComponentOptions {
    directives?: { [key: string]: Directive }
  }

• Приклад

  js

  export default {
    directives: {
      // вмикає v-focus у шаблоні
      focus: {
        mounted(el) {
          el.focus()
        }
      }
    }
  }

  template

  <input v-focus>

  Хеш директив, які будуть доступні для екземпляра компонента.

• Також до вашої уваги: Користувацькі директиви