Разное

name

• Тип: string

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

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

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

delimiters

• Тип: Array<string>

• По умолчанию: ['{{', '}}']

• Ограничения: Эта опция доступна только в полной сборке, с компилятором шаблонов в браузере.

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

  Устанавливает разделители, используемые для интерполяции в шаблоне.

  Обычно применяют для избежания конфликтов с фреймворками на стороне сервера, которые также могут использовать синтаксис с фигурными скобками.

• Пример:

  createApp({
    // Разделители изменены на стиль строковых шаблонов в ES6
    delimiters: ['${', '}']
  })
  

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>
    `
  })
  

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