知海

内置特殊元素

VueAPI 参考

概述 {#overview}

<component>、<slot> 和 <template> 是 Vue 模板语法中的三个内置特殊元素。它们在功能上类似于组件，但并非真正的组件，在模板编译期间会被编译掉。因此，它们通常在模板中用小写字母书写。

:::info 不是组件
<component>、<slot> 和 <template> 具有类似组件的特性，也是模板语法的一部分。但它们并非真正的组件，同时在模板编译期间会被编译掉。因此，它们通常在模板中用小写字母书写。
:::

<component> {#component}

一个用于渲染动态组件或元素的“元组件”。

  • Props

    ts 复制代码 
    interface DynamicComponentProps {
  is: string | Component
}

  • 详细信息

    要渲染的实际组件由 is prop 决定。

    • 当 is 是字符串时，它既可以是 HTML 标签名，也可以是组件的注册名。
    • 或者，is 也可以直接绑定到组件的定义。

  • 示例

    按注册名渲染组件（选项式 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>

    **按定义渲染组件（`

    ```

    渲染 HTML 元素

    vue-html 复制代码 
    <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 而不是其名称，则不需要注册，例如在 `

    ```

    在实践中，这种极端情况并不常见，因为原生表单字段通常包裹在实际应用的组件中。如果确实需要直接使用原生元素，那么你可以手动将 v-model 拆分为 attribute 和事件。

  • 参考：动态组件

<slot> {#slot}

表示模板中的插槽内容出口。

  • Props

    ts 复制代码 
    interface SlotProps {
  /**
   * 任何传递给 <slot> 的 prop 都可以作为作用域插槽
   * 的参数传递
   */
  [key: string]: any
  /**
   * 保留，用于指定插槽名。
   */
  name?: string
}

  • 详细信息

    <slot> 元素可以使用 name attribute 来指定插槽名。当没有指定 name 时，将会渲染默认插槽。传递给插槽元素的附加 attributes 将作为插槽 props，传递给父级中定义的作用域插槽。

    元素本身将被其所匹配的插槽内容替换。

    Vue 模板里的 <slot> 元素会被编译到 JavaScript，因此不要与原生 <slot> 元素进行混淆。

  • 参考：组件 - 插槽

<template> {#template}

当我们想要使用内置指令而不在 DOM 中渲染元素时，<template> 标签可以作为占位符使用。

帮助我们改进文档

发现翻译问题或内容错误？请告诉我们。