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>
效果: