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

<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 для указания имени слота. Если 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>. Этот тег верхнего уровня не является частью самого шаблона и не поддерживает синтаксис шаблона, например директивы.

• См. также

  • Руководство - v-if и <template>
  • Руководство - v-for и <template>
  • Руководство - Именованные слоты