【定义动态组件】

利用动态组件可以动态切换页面中现实的组件,使用标签可以定义动态组件,语法格式如下。

<component is ="要渲染的组件"></component>

在上述语法中,标签必须配合is属性一起使用,is属性属性值表示要渲染组件,当该属性值发生变化时,页面中渲染组件也会发生变化,is属性的属性值可以是字符串或组件,当属性值为组件时,如果要实现组件的切换,需要调用shallowRef()函数定义响应式数据,shallowRef()函数只处理对象外层属性响应,它比ref()函数更适合于将组件的使用方法:
1.打开命令式提示符,切换到D:\vue\chapter04\04目录,在该目录下执行如下命令,创建项目。

yarn create vite component _foundation--template vue

2.项目创建完成后,执行如下命令进入项目目录,启动项目。

cd component_foundation
yarn
yarn dev

3.使用VS Code 编辑器打开D:\vue\chapter04\components-foundation目录
4.将src\style.css文件中样式代码全部删除
5.创建src\components\MyLeft.vue文件

<template>MyLeft组件</template>

6.创建src\components\MyRight.vue文件

<template>MyRight组件</template>

7.创建src\components\DynamicComponents.vue文件,在该文件中导入并使用MyLeft和MyRighqt组件,实现单击按钮时动态切换组件效果

<template><button @click="showComponent = MyLeft">展示Myleft 组件</button><button @click="showComponent = MyRight">展示MyRight 组件</button><div><component :is="showComponent"></component></div>
</template>
<script set up>
import MyLeft from'./MyLeft.vue'
import MyRight from './MyRight.vue'
import {shallowRef} from 'vue'
const showCompoonent = shallowRef(MyLeft)
</script>

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

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

相关文章

MySQL之查询性能优化(九)

查询性能优化 MySQL查询优化器的局限性 UNION的限制 有时&#xff0c;MySQL无法将限制条件从外层"下推"到内层&#xff0c;这使得原本能够限制部分返回结果的条件无法应用到内层查询的优化上。如果希望UNION的各个子句能够根据LIMIT只取部分结果集&#xff0c;或者…

项目沟通管理

目录 1.概述 2.项目沟通的重要性和必要性 2.1.项目沟通的重要性 2.2.项目沟通的必要性 2.3.具体措施 3.三个过程 3.1.规划沟通管理 3.2.管理沟通 3.3.监督沟通 3.4.对应过程组 4.应用场景 4.1.十个应用场景 4.2.新产品开发项目需要与多个部门协调沟通 5.总结 1.概…

调节效应多元统计回归

什么是调节效应&#xff0c;给个例子说明一下: 背景 假设我们有一个国家的经济数据&#xff0c;我们希望研究产业数字化是否调节了环境规制对产业结构调整的影响。 步骤 1. 假设检验 原假设 (H0)&#xff1a; 产业数字化对环境规制与产业结构调整之间的关系没有调节作用。…

C++ | 类对象初始化

文章目录 概述一、定义介绍二、操作教程1.直接初始化&#xff08;Direct Initialization&#xff09;2.复制初始化&#xff08;Copy Initialization&#xff09;3.列表初始化&#xff08;List Initialization&#xff09; 概述 本节介绍类对象初始化。 一、定义介绍 在C中通过…

银河麒麟V10_系统如何自定义添加桌面右键菜单选项

本篇博客取自《银河麒麟桌面操作系统软件适配常见问题指导手册》官网可以下载。 环境 系统版本 适用系统&#xff1a;V10&#xff08;SP1&#xff09;适用架构&#xff1a;X86、ARM、MIPS 其他版本和架构可做参考。 解决方案 使用下面的这个demo 编译就可以看到效果 peony…

每日一题——Python实现PAT甲级1063 Set Similarity(举一反三+思想解读+逐步优化)

一个认为一切根源都是“自己不够强”的INTJ 个人主页&#xff1a;用哲学编程-CSDN博客专栏&#xff1a;每日一题——举一反三Python编程学习Python内置函数 Python-3.12.0文档解读 目录 我的写法 优点 改进建议 时间复杂度分析 空间复杂度分析 总结 我要更强 优化方…

【C语言】指针(4)

一、回顾 在这之前&#xff0c;我们学习了很多关于指针的内容&#xff0c;我们先在这里简单的回顾一下。 1、一级指针 int* p; -- 整形指针-指向整形的指针 char* p; ... void* p;... ... 2、二级指针 int** p; char** p; ... 3、数组指针 -- 指向数组的指针 int (*p)[ ]…

3038. 相同分数的最大操作数目 I(Rust模拟击败100%Rust用户)

题目 给你一个整数数组 nums &#xff0c;如果 nums 至少 包含 2 个元素&#xff0c;你可以执行以下操作&#xff1a; 选择 nums 中的前两个元素并将它们删除。 一次操作的 分数 是被删除元素的和。 在确保 所有操作分数相同 的前提下&#xff0c;请你求出 最多 能进行多少次…

在 Vue 中实现算法可视化

算法是计算机科学的核心&#xff0c;而算法可视化有助于更好地理解算法的运行过程。本文将介绍如何在 Vue.js 中实现算法可视化&#xff0c;以排序算法为例&#xff0c;逐步展示数据变化过程。 环境搭建 首先&#xff0c;确保你已安装 Vue CLI&#xff0c;可以使用以下命令创…

Python | Leetcode Python题解之第136题只出现一次的数字

题目&#xff1a; 题解&#xff1a; class Solution:def singleNumber(self, nums: List[int]) -> int:return reduce(lambda x, y: x ^ y, nums)

Vue07-MVVM模型

一、MVVM模型的定义 M&#xff1a;模型&#xff08;model&#xff09;&#xff1a;对应data中的数据&#xff1b;V&#xff1a;视图&#xff08;view&#xff09;&#xff1a;模版&#xff1b;VM&#xff1a;视图模型&#xff08;ViewModel&#xff09;Vue的实例对象。 Vue.js…

WSDM2022推荐系统相关论文整理(一)

2022年第15届国际网络搜索与数据挖掘会议WSDM在2022年2月21日到25日于线上举行&#xff0c;共收到了786份有效投稿&#xff0c;最终录取篇数为159篇&#xff0c;录取率为20.23%。作为主流的搜索与数据挖掘会议&#xff0c;论文的话题主要侧重于搜索、推荐以及数据挖掘领域&…

第二证券炒股知识:北交所的股票是a股吗?是主板吗?

北交所的股票是a股&#xff0c;但不属于主板&#xff0c;是一个单独的板块。 A股主板是在上海证券买卖所或许深圳证券买卖所上市的公司&#xff0c;主板通常是大盘股&#xff0c;多为商场占有率高、规划大、盈余安稳良好的大型企业。沪市主板以600、601或603最初&#xff0c;深…

Leetcode 654:最大二叉树

给定一个不重复的整数数组 nums 。 最大二叉树 可以用下面的算法从 nums 递归地构建: 创建一个根节点&#xff0c;其值为 nums 中的最大值。递归地在最大值 左边 的 子数组前缀上 构建左子树。递归地在最大值 右边 的 子数组后缀上 构建右子树。 返回 nums 构建的 最大二叉树…

(学习笔记)数据基建-数据安全

&#xff08;学习笔记&#xff09;数据基建-数据安全 数据安全数据安全实施难点数据安全保障流程数据安全措施实施阶段数据安全如何量化产出数据安全思考 数据安全 数据安全问题是最近比较热的话题&#xff0c;数据泄漏引发的用户信任危机事件也比比皆是&#xff0c;以及跨部门…

2024年度计划

1&#xff0c;人工智能学习路径&#xff1a; Python基础&#xff1a;深兰科技机器学习&#xff1a;马士兵教育计算机视觉和图像处理&#xff1a;黑马程序员NLP自然语言处理&#xff1a;黑马程序员计算机视觉与图像处理项目&#xff1a;智慧交通&#xff1a;实时人脸识别检测&am…

什么是负载均衡?在网络中如何实现?

负载均衡&#xff08;Load Balancing&#xff09;是一种网络技术&#xff0c;用于将网络请求或数据传输任务分发到多个服务器或处理单元上&#xff0c;以实现更高效的资源利用、更高的处理能力和更好的系统可靠性。负载均衡的目标是优化资源使用、最大化吞吐量、减少响应时间&a…

一个案例,剖析攻防演练中威胁溯源的正确姿势

一年一度的攻防演练即将拉开帷幕。“威胁溯源”一直是演练活动中一个十分重要的工作项&#xff0c;它不仅有助于理解和分析攻击的来源、方法和动机&#xff0c;还能够显著提升整体安全防护水位&#xff0c;提升组件与人员的联动协作能力。在真实的攻击场景中&#xff0c;溯源工…

verilog 232串口通信程序

1,串口通信协议: 通常串口的一次发送或接收由四个部分组成:起始位S、数据位D0~D7(一般为 6 位~8 位之间可变,数据低位在前)、校验位(奇校验、偶检验或不需要校验位)、停止位(通常为1位、1.5位、2位)。停止位必须为逻辑 1。在一次串口通信过程中,数据接收与发送双方…

[STM32]定位器与PWM的LED控制

目录 1. 深入了解STM32定时器原理&#xff0c;掌握脉宽调制pwm生成方法。 (1)STM32定时器原理 原理概述 STM32定时器的常见模式 使用步骤 (2)脉宽调制pwm生成方法。 2. 实验 (1)LED亮灭 代码 测试效果 (2)呼吸灯 代码 测试效果 3.总结 1. 深入了解STM32定时器原…