Skip to content
Содержание

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

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

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

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

  • См. также

Встроенные специальные элементыУже загружено