Vue.js

# Разное

# name

  • Тип: string

  • Подробности:

    Позволяет компоненту рекурсивно вызывать себя в своём шаблоне. Обратите внимание, что при глобальной регистрации с помощью app.component в качестве имени автоматически устанавливается его глобальный ID.

    Указание опции name также будет плюсом при отладке. Предупреждающие сообщения будут содержать больше полезных сведений. При изучении приложения через vue-devtools (opens new window) можно получить гораздо более информативное дерево компонентов, тогда как компоненты без имени отобразятся как <AnonymousComponent>, что не очень информативно.

# inheritAttrs

  • Тип: boolean

  • По умолчанию: true

  • Подробности:

    Атрибуты, которые привязаны в родительской области видимости и не распознаны как входные параметры, по умолчанию будут «проваливаться». Это значит, что для компонента с одним корневым элементом эти привязки добавятся к корневому элементу дочернего компонента как обычные HTML-атрибуты. Это не всегда желательно при создании компонента, который оборачивает целевой элемент или другой компонент. Установив inheritAttrs в значение false, такое поведение по умолчанию можно отключить. Атрибуты будут доступны через свойство экземпляра $attrs, и их можно будет явно привязать через v-bind не только к корневому элементу.

  • Использование:

    app.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  emits: ['input'],
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"
      >
    </label>
  `
})
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

  • См. также: Отключение наследования атрибутов

# compilerOptions 3.1.0+

  • Тип: Object

  • Подробности:

    Это эквивалент на уровне компонента для конфигурации compilerOptions приложения.

  • Использование:

    const Foo = {
  // ...
  compilerOptions: {
    delimiters: ['${', '}'],
    comments: true
  }
}
    1
    2
    3
    4
    5
    6
    7

    Важно

    Аналогично конфигурации compilerOptions на уровне приложения, эта опция работает только при использовании полной сборки с компиляцией шаблонов в браузере.

# delimiters удалено

Удалено в версии 3.1.0. Вместо неё используйте compilerOptions.delimiters.

← Свойства экземпляра →