Встроенные специальные элементы
Не компоненты
<component>
и <slot>
являются компонентоподобными функциями и частью синтаксиса шаблона. Они не являются настоящими компонентами и удаляются при компиляции шаблона. Поэтому в шаблонах их принято писать со строчной буквы.
<component>
«Мета-компонент» для отрисовки динамических компонентов.
Входные параметры
tsinterface 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>
Обозначает выходы содержимого слотов в шаблонах.
Входные параметры
tsinterface 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>
. Этот тег верхнего уровня не является частью самого шаблона и не поддерживает синтаксис шаблона, например директивы.См. также