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

<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>
  • Руководство - Именованные слоты