Vue3中动态组件使用

一,动态组件使用

应用场景:动态绑定或切换组件
应用Vue3碎片: is

1.使用

a.组件A

<div class="layout-base"><Button>红茶</Button>
</div>

a.组件B

<div class="layout-base"><Button>绿茶</Button>
</div>

2.页面使用


<template>
<div class="layout-base"><component :is='isChange? ReaTea:GreenTea'></component><Button @click="showChange">换茶</Button>
</div>
</template><script setup>import {ref} from 'vue'
import GreenTea from'./comisTabs/greenTea.vue'
import RedTea.vue from './comisTabs/redTea.vue'const isChange=ref(false)
const showChange=(()=>isChange.value=!isChange.value)</script>

3.效果图

在这里插入图片描述

简单使用,总结至此,欢迎各位工友交流学习。
传送门:
1.Vue3中provide,inject使用
2.Vue3中使用自定义指令
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/630385.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【MATLAB】SVMD_LSTM神经网络时序预测算法

有意向获取代码&#xff0c;请转文末观看代码获取方式~也可转原文链接获取~ 1 基本定义 SVMD-LSTM神经网络时序预测算法是一种结合了单变量经验模态分解&#xff08;Singular Value Decomposition&#xff0c;SVD&#xff09;和长短期记忆神经网络&#xff08;LSTM&#xff09…

第二百七十二回

文章目录 1. 概念介绍2. 方法与类型2.1 使用方法2.2 常见类型 3. 示例代码4. 内容总结 我们在上一章回中介绍了"如何加载本地图片"相关的内容&#xff0c;本章回中将介绍如何获取文件类型.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我们在本章回…

23.实战演练--个人主页

<?xml version"1.0" encoding"utf-8"?> <manifest xmlns:android"http://schemas.android.com/apk/res/android"xmlns:tools"http://schemas.android.com/tools"><applicationandroid:allowBackup"true"an…

【项目实战】Postgresql数据库中出现锁表如何解决

&#x1f339;作者主页&#xff1a;青花锁 &#x1f339;简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java微服务架构公号作者&#x1f604; &#x1f339;简历模板、学习资料、面试题库、技术互助 &#x1f339;文末获取联系方式 &#x1f4dd; 系列专栏目录 [Java项目…

Unity之触发器

目录 &#x1f4d5;一、触发器概念 &#x1f4d5;二、碰撞与触发的区别 &#x1f4d5;三、触发器小实例 一、触发器概念 第一次玩侠盗猎车手是在小学&#xff0c;从那以后就开启了我的五星好市民之路。 下面是小编在小破站截的图&#xff0c;这是罪恶都市最开始的地方&a…

MCU和MPU有什么区别

大家好&#xff0c;今天给大家介绍MCU和MPU有什么区别&#xff0c;文章末尾附有分享大家一个资料包&#xff0c;差不多150多G。里面学习内容、面经、项目都比较新也比较全&#xff01;可进群免费领取。 MCU&#xff08;Microcontroller Unit&#xff09;和MPU&#xff08;Micro…

蓝桥杯备赛 day 2 —— 二分算法(C/C++,零基础,配图)

目录 &#x1f308;前言&#xff1a; &#x1f4c1; 二分的概念 &#x1f4c1; 整数二分 &#x1f4c1; 二分的模板 &#x1f4c1; 习题 &#x1f4c1; 总结 &#x1f308;前言&#xff1a; 这篇文章主要是准备蓝桥杯竞赛同学所写&#xff0c;为你更好准备蓝桥杯比赛涉及…

从0到1:实验室设备借用小程序开发笔记

概论 实验室设备借用小程序&#xff0c;适合各大高校&#xff0c;科技园区&#xff0c;大型企业集团的实验室设备借用流程, 通过数字化的手段进一步提升相关单位设备保障水平&#xff0c;规范实验室和设备管理&#xff0c;用户通过手机小程序扫描设备的二维码&#xff0c;可以…

深入解析:如何使用Java、SpringBoot、Vue.js和MySQL构建课表管理系统

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…

VS代码生成工具ReSharper v2023.3正式发布——支持C# 12

实质上&#xff0c;ReSharper特征可用于C#&#xff0c;VB.net&#xff0c;XML&#xff0c;Asp.net&#xff0c;XAML&#xff0c;和构建脚本。 使用ReSharper&#xff0c;你可以进行深度代码分析&#xff0c;智能代码协助&#xff0c;实时错误代码高亮显示&#xff0c;解决方案范…

JavaScript基础(27)_内联样式的获取和修改、获取元素当前显示的样式

内联样式的获取和修改 获取元素的内联样式&#xff1a; 语法&#xff1a;元素.style.样式名 注意&#xff1a;通过style属性设置和读取的都是内联样式&#xff0c;无法读取样式表中的样式。 修改元素的内联样式&#xff1a; 语法&#xff1a;元素.style.样式名 样式值比如…

并发编程之深入理解AQS

目录 什么是AQS&#xff1f; AQS的特性 AQS总结 什么是AQS&#xff1f; java.util.concurrent包中的大多数同步器实现都是围绕着共同的基础行为&#xff0c;比如等待队列、条件队列、独占获取、共享获取等&#xff0c;而这些行为的抽象就是基于AbstractQueuedSynchronizer&a…

WordPress后台仪表盘自定义添加删除概览项目插件Glance That

成功搭建WordPress站点&#xff0c;登录后台后可以在“仪表盘 – 概览”中看到包括多少篇文章、多少个页面、多少条评论和当前WordPress版本号及所使用的主题。具体如下图所示&#xff1a; 但是如果我们的WordPress站点还有自定义文章类型&#xff0c;也想在概览中显示出来应该…

【经验分享】美赛报名以及注册方法-以2024年美赛为例

1 进入美赛官网 首先点击COMAP的官网链接&#xff1a; https://www.comap.com/然后选择Contests目录下的MCM/ICM 选择 Learn More and Register 然后选择 register for contest 接下来开始注册环节&#xff0c;注册分为两个步骤&#xff1a;顾问&#xff08;指导教师&#xf…

Jsqlparser简单学习

文章目录 学习链接模块访问者模式parser模块statement模块Expression模块deparser模块 测试TestDropTestSelectTestSelectVisitor 学习链接 java设计模式&#xff1a;访问者模式 github使用示例参考 测试 JSqlParser使用示例 JSqlParse&#xff08;一&#xff09;基本增删改…

GitHub API使用--获取GitHub topic

目录标题 技术简介申请token简单使用使用Java调用获取GitHub topic总结 技术简介 GitHub API是一个功能强大的工具&#xff0c;为开发者提供了访问和操作GitHub平台上资源的途径。无论是构建个人工具&#xff0c;集成自动化流程&#xff0c;还是开发应用程序&#xff0c;GitHu…

【Git】任何位置查看git日志

需求 现需要查看指定项目中的某个文件的 Git 日志。如有 项目代码 jflowable &#xff0c;需要查看其下文件 D:\z_workspace\jflowable\src\main\java\com\xzbd\jflowable\controller\TestController.java 的日志。 分析 一般的思路是&#xff0c;进入 jflowable 项目&#…

ES 之索引和文档

本文主要介绍ES中的数据组成结构单元。 一、文档(Document) 1、概念 ES的数据存储单元是面向文档的&#xff0c;文档是所有数据存储&#xff0c;搜索的最小单元。 你可以把ES中的文档对应成mysql中的一条条数据记录。到时候你存进ES的数据就是一个个文档。 文档存入ES是序列…

BRC20通证的诞生与未来展望!如何导入bitget教程

BRC-20通证是什么&#xff1f; 嘿&#xff01;你知道BRC-20通证吗&#xff1f;这可是比特币区块链上的超级明星&#xff01;它们不依赖智能合约&#xff0c;而是把JSON代码刻在聪上&#xff0c;聪可是比特币的最小单位哦&#xff01;就像在比特币的乐高积木上盖房子&#xff0…

dubbo入门案例!!!

入门案例之前我们先介绍一下&#xff1a;zookeeper。 Zookeeper是Apacahe Hadoop的子项目&#xff0c;可以为分布式应用程序协调服务&#xff0c;适合作为Dubbo服务的注册中心&#xff0c;负责服务地址的注册与查找&#xff0c;相当于目录服务&#xff0c;服务提供者和消费者只…