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