Vue3 使用动态组件 component

最新推荐文章于 2024-07-26 20:46:33 发布

小吴吴吴呀

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量1k

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/xiaowude_boke/article/details/136246641

版权

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>

效果：