【Vue】＜component＞ 内置元素

渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。

基本用法

• <component>：一个用于渲染动态组件或元素的“元组件”。

<!-- 动态组件由 vm 实例的 `componentId` property 控制 -->
<component :is="componentId"></component>

<!-- 也能够渲染注册过的组件或 prop 传入的组件 -->
<component :is="$options.components.child"></component>

• is属性：要渲染的实际组件由 is prop 决定

interface DynamicComponentProps {
  is: string | Component
}
- 当 is 是字符串，它既可以是 HTML 标签名也可以是组件的注册名
- is 也可以直接绑定到组件的定义。

• 示例：按注册名渲染组件

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