Vue3 使用动态组件 component

简介: Vue3 使用动态组件 component

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>

效果:


相关文章
|
4天前
|
JavaScript 数据库
ant design vue日期组件怎么清空 取消默认当天日期
ant design vue日期组件怎么清空 取消默认当天日期
|
3天前
|
JavaScript 前端开发 CDN
vue3速览
vue3速览
13 0
|
3天前
|
设计模式 JavaScript 前端开发
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
Vue3报错Property “xxx“ was accessed during render but is not defined on instance
|
3天前
|
JavaScript API
Vue3 官方文档速通(中)
Vue3 官方文档速通(中)
18 0
|
3天前
|
缓存 JavaScript 前端开发
Vue3 官方文档速通(上)
Vue3 官方文档速通(上)
22 0
|
3天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
Vue3+Vite+Pinia+Naive后台管理系统搭建之五:Pinia 状态管理
8 1
|
3天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之三:vue-router 的安装和使用
8 0
|
3天前
Vue3+Vite+Pinia+Naive后台管理系统搭建之二:scss 的安装和使用
Vue3+Vite+Pinia+Naive后台管理系统搭建之二:scss 的安装和使用
8 0
|
3天前
|
JavaScript 前端开发 API
Vue3 系列:从0开始学习vue3.0
Vue3 系列:从0开始学习vue3.0
9 1
|
3天前
|
网络架构
Vue3 系列:vue-router
Vue3 系列:vue-router
9 2