Vue.js

外观

本页内容

内置特殊元素 ​

非组件

<component>, <slot> 和 <template> 是类似组件的功能和模板语法的一部分。它们不是真正的组件，在模板编译过程中会被编译掉。因此，它们通常在模板中以小写形式书写。

<component> ​

渲染动态组件或元素的“元组件”。

  • 属性

    ts
    interface DynamicComponentProps {
  is: string | Component
}

  • 详情

    实际要渲染的组件由 is 属性确定。

    • 当 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>

    通过定义渲染组件（使用 <script setup> 的 Composition API）

    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 元素

    模板
    <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> 中，则不需要注册。

    如果在 <component> 标签上使用 v-model，模板编译器将将其展开为 modelValue 属性和 update:modelValue 事件监听器，就像对任何其他组件所做的那样。然而，这不会与原生 HTML 元素兼容，例如 <input> 或 <select>。因此，使用 v-model 与动态创建的原生元素不会工作

    vue
    <script setup>
import { ref } from 'vue'

const tag = ref('input')
const username = ref('')
</script>

<template>
  <!-- This won't work as 'input' is a native HTML element -->
  <component :is="tag" v-model="username" />
</template>

    在实践中，这种边缘情况并不常见，因为原生表单字段通常在真实应用中被封装在组件中。如果你确实需要直接使用原生元素，则可以手动将 v-model 分解为一个属性和事件。

  • 另请参阅 动态组件

<slot> ​

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

  • 属性

    ts
    interface SlotProps {
  /**
   * Any props passed to <slot> to passed as arguments
   * for scoped slots
   */
  [key: string]: any
  /**
   * Reserved for specifying slot name.
   */
  name?: string
}

  • 详情

    可以使用 <slot> 元素的 name 属性来指定槽名称。如果没有指定 name，则将渲染默认槽。传递给槽元素的额外属性将作为作用域插槽的槽属性传递给父组件中定义的插槽。

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

    Vue 模板中的 <slot> 元素被编译成 JavaScript，因此不要与 原生的 <slot> 元素 混淆。

  • 另请参阅 组件 - 插槽

<template> ​

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

在 GitHub 上编辑此页面