component 標簽:用于動態渲染標簽或組件。
語法格式:
<component is="標簽或組件名">標簽內容</component>
動態渲染標簽:
<template><h3>我是父組件</h3><component is="h1">動態渲染 h1 標簽</component>
</template>
效果:
動態渲染組件:
?
<template><h3>我是父組件</h3><button @click="isShow = !isShow">切換組件</button><hr /><!-- 如果 isShow 為 true 就顯示 A 組件,否則顯示 B 組件 --><component :is="isShow ? A : B"></component>
</template><script setup>
// 引入組件
import A from '../components/A';
import B from '../components/B';
// 引入 ref 函數
import { ref } from 'vue';
const isShow = ref(true);
</script>
效果:
原創作者:吳小糖
創作時間:2024.2.23?