Vue.js

Оформление

Оглавление

Встроенные специальные элементы ​

Не компоненты

<component>, <slot> и <template> являются компонентоподобными функциями и частью синтаксиса шаблонов. Они не являются настоящими компонентами и удаляются при компиляции шаблона. Поэтому в шаблонах их принято писать со строчной буквы.

<component> ​

«Мета-компонент» для отображения динамических компонентов или элементов.

  • Пропсы

    ts
    interface DynamicComponentProps {
  is: string | Component
}

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

    Фактический компонент для отрисовки определяется параметром is.

    • Если is — это строка, то это может быть либо имя HTML-тега, либо зарегистрированное имя компонента.

    • В качестве альтернативы is можно также напрямую привязать к определению компонента.

  • Пример

    Отрисовка компонентов по зарегистрированному имени (Options API):

    vue
    <script>
import Foo from './Foo.vue'
import Bar from './Bar.vue'

export default {
  components: { Foo, Bar },
  data() {
    return {
      view: 'Foo'
    }
  }
}
</script>

<template>
  <component :is="view" />
</template>

    Отрисовка компонентов по определению (Composition API с <script setup>):

    vue
    <script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>

<template>
  <component :is="Math.random() > 0.5 ? Foo : Bar" />
</template>

    Отрисовка HTML-элементов:

    template
    <component :is="href ? 'a' : 'span'"></component>

    Все встроенные компоненты могут быть переданы в is, но вы должны зарегистрировать их, если хотите передавать их по имени. Например:

    vue
    <script>
import { Transition, TransitionGroup } from 'vue'

export default {
  components: {
    Transition,
    TransitionGroup
  }
}
</script>

<template>
  <component :is="isGroup ? 'TransitionGroup' : 'Transition'">
    ...
  </component>
</template>

    Регистрация не требуется, если вы передаете в is сам компонент, а не его имя, например, в <script setup>.

    Если v-model используется в теге <component>, компилятор шаблонов расширит его до свойства modelValue и слушателя события update:modelValue, как и для любого другого компонента. Однако это не будет совместимо с нативными элементами HTML, такими как <input> или <select>. В результате использование v-model с динамически созданным нативным элементом не будет работать:

    vue
    <script setup>
import { ref } from 'vue'

const tag = ref('input')
const username = ref('')
</script>

<template>
  <!-- Это не сработает, так как 'input' является собственным элементом HTML -->
  <component :is="tag" v-model="username" />
</template>

    На практике этот крайний случай встречается нечасто, поскольку в реальных приложениях родные поля форм обычно обёрнуты в компоненты. Если вам необходимо использовать нативный элемент напрямую, то вы можете разделить v-model на атрибут и событие вручную.

  • Смотрите также Динамические компоненты

<slot> ​

Обозначает выходы содержимого слотов в шаблонах.

  • Пропсы

    ts
    interface SlotProps {
  /**
   * Любые параметры, переданные в <slot>, будут передаваться
   * в качестве аргументов для слотов, имеющих скопированное значение
   */
  [key: string]: any
  /**
   * Зарезервировано для указания имени слота
   */
  name?: string
}

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

    Элемент <slot> может использовать атрибут name для указания имени слота. Если имя не указано, будет отображаться слот по умолчанию. Дополнительные атрибуты, переданные элементу slot, будут переданы в качестве параметров слота в слот, определённый в родителе.

    Сам элемент будет заменён содержимым соответствующего слота.

    Элементы <slot> в шаблонах Vue компилируются в JavaScript, поэтому их не следует путать с нативными элементами <slot>.

  • Смотрите также Компоненты - Слоты

<template> ​

Тег <template> используется в качестве заполнителя, когда мы хотим использовать встроенную директиву без отрисовки элемента в DOM.

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

    Специальная обработка <template> срабатывает только в том случае, если он используется с одной из этих директив:

    • v-if, v-else-if или v-else
    • v-for
    • v-slot

    Если ни одна из этих директив не присутствует, то вместо этого он будет отображаться как нативный элемент <template>.

    Шаблон <template> с v-for может также иметь атрибут key. Все остальные атрибуты и директивы будут отброшены, поскольку они не имеют смысла без соответствующего элемента.

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

  • Смотрите также

Редактировать эту страницу на GitHub