Vue.js <component>用法及代码示例

用于渲染动态组件或元素的"meta component"。

属性

interface DynamicComponentProps {
  is: string | Component
}

细节

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

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

示例

按注册名称渲染组件(选项 API)：

<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> 的组合 API)：

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

内置 components 都可以传递给 is ，但是如果你想通过名字传递它们，你必须注册它们。例如：

<script>
import { Transition, TransitionGroup } from 'vue'

export default {
  components: {
    Transition,
    TransitionGroup
  }
}
</script>

<template>
  <component :is="isGroup ? 'TransitionGroup' : 'Transition'">
    ...
  </component>
</template>

如果您将组件本身传递给 is 而不是其名称，则不需要注册，例如在 <script setup> 中。

相关用法

注：本文由纯净天空筛选整理自vuejs.org大神的英文原创作品 <component>。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。