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>。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。