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,一经查实,立即删除!

相关文章

python基础教程九 抽象一(函数初步)

1. 懒惰是种美德 前面编写的程序都很小&#xff0c;但如果要编写大型程序&#xff0c;你很快会遇到麻烦。想想看&#xff0c;如果你在一个地方编写了一些代码&#xff0c;但需要在另一个地方再次使用&#xff0c;该如何办?例如&#xff0c;假设你编写了一段代码&#xff0c;他…

Linux 常用的一些命令

目录 一、常用文件管理命令二、tmux 和 vimtmuxvim 三、[Shell语法](https://blog.csdn.net/weixin_43288201/article/details/105643692)四、git五、sshReference 一、常用文件管理命令 (1) ctrl c: 取消命令&#xff0c;并且换行 (2) ctrl u: 清空本行命令 (3) tab键&#x…

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

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

前端基础:回顾es6相关知识

Author note(题记)&#xff1a; ECMAscript is international standard of javascript。 ECMA 是 js的国际标准版语言。 let and const 为什么之前用var现在需要用let&#xff0c;const呢&#xff1f; 其实就是因为规范作用域的问题。var的作用域无块级 for (var i 0; i <…

第二百七十二回

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

常用的消息队列和中间件都有哪些

常用的消息队列和中间件有以下几种&#xff1a; RabbitMQ&#xff1a;RabbitMQ是一个开源的消息队列中间件&#xff0c;使用Erlang语言编写。它具有可靠性、灵活性和易用性的特点&#xff0c;支持多种消息协议。 Kafka&#xff1a;Kafka是一个高吞吐量的分布式发布订阅消息系统…

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…

Rust类型之数组和动态数组

数组动态数组类型arrayVec&#xff08;Vector&#xff09;&#xff0c;向量作用存储同一类型的多个值存储同一类型的多个值表示数组表示成[T; N]&#xff0c;由中括号括起来&#xff0c;中间用分号隔开&#xff0c;分号前面表示类型&#xff0c;分号后面表示数组长度。Vec<类…

蓝桥杯备赛 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;解决方案范…

STM32 定时器输入捕获3——捕获超长高电平

第一章&#xff1a;https://blog.csdn.net/m0_73671341/article/details/134773615?spm1001.2014.3001.5501 第二章&#xff1a;https://blog.csdn.net/m0_73671341/article/details/134938332?spm1001.2014.3001.5501 从第一章的定时器捕获我们可以知道&#xff0c;即使把定…

杂记:使用 mac 和 windows 以及编辑器的总结

Chrome 扩展 Grammarly 语法检查 DM Integration Module idm 下载扩展 JSON Formatter json 格式化查看 uBlock Origin Ad block 油猴 任意网站都可以使用的脚本管理工具 Mac 快捷键整理 截图到剪贴板 shift command control 4 (不按 shift 存储为文件) 切换输入法…

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

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

子文件夹中一个.py文件导入父文件夹中某个.py文件

虽然各种Python语言编程书籍中一再强调&#xff0c;自从Python 3.3版本后&#xff0c;构建Python的Package结构&#xff0c;不用在每个文件夹下添加__init__.py文件。上面这句话&#xff0c;仅仅针对的是从主文件夹中的主要.py来导入各个子文件夹的模块结构来说的。自己亲自试验…

并发编程之深入理解AQS

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