当前位置： 首页 > news >正文

vue3(七)-基础入门之事件总线与动态组件

news 2026/4/2 0:31:23

一、事件总线

  • 事件总线使用场景： 两个兄弟组件之间的传参，或者两个没有关联的组件之间的传参

html ：引入 publicmsg 与 acceptmsg 自定义组件 (自定义组件名称必须小写)

<body><div id="app"><publicmsg></publicmsg><acceptmsg></acceptmsg></div><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><script type="module" src="./js/templates.js"></script><script src="https://unpkg.com/mitt/dist/mitt.umd.js"></script></body>

js: 通过 emit(‘事件名称’,‘传递的参数’) 发布事件 ，on(‘事件名称’,回调函数) 监控事件

<script>
const emitter = window.mitt()
const app = Vue.createApp({})
app.component('publicmsg', {template:'<div><input type="text" ref="publicMessage"/><button @click="publicMsg()">发布</button></div>',methods: {publicMsg () {emitter.emit('messages', this.$refs.publicMessage.value)}}}).component('acceptmsg', {data () {return { acceptMesage: '' }},template: '<div><p>接收：{{acceptMesage}}</p></div>',mounted () {emitter.on('messages', msg => {this.acceptMesage = msg})}}).mount('#app')
</script>

二、动态组件

通过 component 标签 及 :is 属性动态选择显示的组件，keep-alive 标签可以使得组件在切换时，原组件被隐藏而不是被删除

html :

<body><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><script type="module" src="./js/11.动态组件.js"></script><div id="app"><keep-alive><component :is="chooseValue"></component></keep-alive><select v-model="chooseValue"><option value="component1">组件1</option><option value="component2">组件2</option><option value="component3">组件3</option></select></div>
</body>

js :

<script>
const app = Vue.createApp({data () {return { chooseValue: 'component1' }},components: {component1: {template: '<div><button>组件1</button><input type="text"/></div>'},component2: {template: '<div><button>组件2</button><input type="text"/></div>'},component3: {template: '<div><button>组件3</button><input type="text"/></div>'}}
}).mount('#app')</script>

结果演示：

A：当前为组件1： 输入文字后

在这里插入图片描述
-------------------------------------------------------------------------------------------

B:切换到组件2：

在这里插入图片描述
-------------------------------------------------------------------------------------------

C:切回组件1： 组件1输入的文字没有消失

在这里插入图片描述

相关文章：

vue3(七)-基础入门之事件总线与动态组件

一、事件总线 事件总线使用场景&#xff1a; 两个兄弟组件之间的传参&#xff0c;或者两个没有关联的组件之间的传参 html &#xff1a;引入 publicmsg 与 acceptmsg 自定义组件 (自定义组件名称必须小写) <body><div id"app"><publicmsg></…...

编程日记 2023/12/25 7:29:26

【计算机网络】网络层——IP协议

目录 一. 基本概念 二. 协议报文格式 三. 网段划分 1. 第一次划分 2. CIDR方案 3. 特殊的IP地址 四. IP地址不足 1. 私有IP和公网IP 2. DHCP协议 3. 路由器 4. NAT技术 内网穿透(NAT穿透) 五. 路由转发 路由表生成算法 结束语 一. 基本概念 IP指网络互连协议…...

编程日记 2023/12/25 7:28:24

《钢结构设计标准》中抗震性能化设计的概念

文章目录 0. 背景1. 前言2. 什么是抗震性能化设计3. 我国规范是如何实现性能化设计的4. 从能量角度理解性能化设计05. 《钢结构设计标准》抗震性能化设计的思路06. 《钢结构设计标准》抗震性能化设计的步骤 0. 背景 关于抗震性能化设计&#xff0c;之前一直理解的很模糊&#…...

编程日记 2023/12/25 7:25:22

【算法】【动规】回文串系列问题

文章目录 跳转汇总链接3.1 回文子串3.2 最长回文子串3.3 分割回文串 IV3.4 分割回文串II(hard) 跳转汇总链接 &#x1f449;&#x1f517;动态规划算法汇总链接 3.1 回文子串 &#x1f517;题目链接 给定一个字符串 s &#xff0c;请计算这个字符串中有多少个回文子字符串。 …...

编程日记 2023/12/25 7:23:20

4-Docker命令之docker logs

1.docker logs介绍 docker logs命令是用来获取docker容器的日志 2.docker logs用法 docker logs [参数] CONTAINER [root@centos79 ~]# docker logs --helpUsage: docker logs [OPTIONS] CONTAINERFetch the logs of a containerAliases:docker container logs, docker lo…...

编程日记 2023/12/25 7:22:19

svelte基础语法学习

官网文档地址&#xff1a;绑定 / Each 块绑定 • Svelte 教程 | Svelte 中文网 1、样式 一般情况下父子组件内样式隔离、同级组件间样式隔离 2、页面布局 <style>P{color: red;} </stye><script> // 类似data let name ‘jiang’ let countVal 0 let s…...

编程日记 2023/12/25 7:21:18

Node.js教程-mysql模块

概述 在Node.js中&#xff0c;mysql模块是实现MySQL协议的JavaScript客户端工具。Node.js程序通过与MySQL建立链接&#xff0c;然后可对数据进行增、删、改、查等操作。 安装 由于mysql模块不是Node.js内置模块&#xff0c;需手动安装 npm i mysql注意&#xff1a;若MySQL服…...

编程日记 2023/12/25 7:18:16

网络通信协议

WebSocket通信 WebSocket是一种基于TCP的网络通信协议&#xff0c;提供了浏览器和服务器之间的全双工通信&#xff08;full-duplex&#xff09;能力。在WebSocket API中&#xff0c;浏览器和服务器只需要完成一次握手&#xff0c;两者之间就直接可以创建持久性的连接&#xff…...

编程日记 2023/12/25 7:17:15

Spark集群部署与架构

在大数据时代&#xff0c;处理海量数据需要分布式计算框架。Apache Spark作为一种强大的大数据处理工具&#xff0c;可以在集群中高效运行&#xff0c;处理数十TB甚至PB级别的数据。本文将介绍如何构建和管理Spark集群&#xff0c;以满足大规模数据处理的需求。 Spark集群架构…...

编程日记 2023/12/25 7:14:12

DshanMCU-R128s2 SDK 架构与目录结构

R128 S2 是全志提供的一款 M33(ARM)C906(RISCV-64)HIFI5(Xtensa) 三核异构 SoC&#xff0c;同时芯片内部 SIP 有 1M SRAM、8M LSPSRAM、8M HSPSRAM 以及 16M NORFLASH。 本文档作为 R128 FreeRTOS SDK 开发指南&#xff0c;旨在帮助软件开发工程师、技术支持工程师快速上手&am…...

编程日记 2023/12/25 7:13:11

【5G PHY】NR参考信号功率和小区总传输功率的计算

博主未授权任何人或组织机构转载博主任何原创文章&#xff0c;感谢各位对原创的支持&#xff01; 博主链接 本人就职于国际知名终端厂商&#xff0c;负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作&#xff0c;目前牵头6G算力网络技术标准研究。 博客…...

编程日记 2023/12/25 7:12:11

k8s学习 — 各知识点快捷入口

k8s学习 — 各知识点快捷入口 k8s学习 — 第一章 核心概念 k8s学习 — 第一章 核心概念 命名空间 实践&#xff1a; k8s学习 — &#xff08;实践&#xff09;第二章 搭建k8s集群k8s学习 — &#xff08;实践&#xff09;第三章 深入Podk8s学习 — &#xff08;实践&#xff0…...

编程日记 2023/12/25 7:10:09

【Python】Python 批量转换PDF到Excel

PDF是面向展示和打印使用的&#xff0c;并未考虑编辑使用&#xff0c;所以缺少了很多编辑属性且非常难修改PDF里面的数据。当您需要分析或修改PDF文档数据时&#xff0c;可以将PDF保存为Excel工作簿&#xff0c;实现轻松编辑数据的需求。PDF转Excel&#xff0c;技术关键就是提取…...

编程日记 2023/12/25 7:09:08

Python并行计算和分布式任务全面指南

更多Python学习内容&#xff1a;ipengtao.com 大家好&#xff0c;我是彭涛&#xff0c;今天为大家分享 Python并行计算和分布式任务全面指南。全文2900字&#xff0c;阅读大约8分钟 并发编程是现代软件开发中不可或缺的一部分&#xff0c;它允许程序同时执行多个任务&#xff0…...

编程日记 2023/12/25 7:08:07

微信小程序promise封装

一. 在utils文件夹内创建一个request.js 写以下封装的 wx.request() 方法 const baseURL https:// 域名 ; //公用总路径地址 export const request (params) > { //暴露出去一个函数&#xff0c;并且接收一个外部传入的参数let dataObj params.data || {}; //…...

编程日记 2023/12/25 7:06:05

hash长度扩展攻击

作为一个信息安全的人&#xff0c;打各个学校的CTF比赛是比较重要的&#xff01; 最近一个朋友发了道题目过来&#xff0c;发现有道题目比较有意思&#xff0c;这里跟大家分享下 这串代码的大致意思是&#xff1a; 这段代码首先引入了一个名为"flag.php"的文件&am…...

编程日记 2023/12/25 6:56:54

设计模式--命令模式

实验16&#xff1a;命令模式 本次实验属于模仿型实验&#xff0c;通过本次实验学生将掌握以下内容&#xff1a; 1、理解命令模式的动机&#xff0c;掌握该模式的结构&#xff1b; 2、能够利用命令模式解决实际问题。 [实验任务]&#xff1a;多次撤销和重复的命令模式 某系…...

编程日记 2023/12/25 6:55:53

单例模式的七种写法

为什么使用单例&#xff1f; 避免重复创建对象,节省内存,方便管理;一般我们在工具类中频繁使用单例模式; 1.饿汉式(静态常量)-[可用] /*** 饿汉式(静态常量)*/ public class Singleton1 {private static final Singleton1 INSTANCE new Singleton1();private Singleton1(){}…...

编程日记 2023/12/25 6:53:52

ElasticSearch入门介绍和实战

目录 1.ElasticSearch简介 1.1 ElasticSearch&#xff08;简称ES&#xff09; 1.2 ElasticSearch与Lucene的关系 1.3 哪些公司在使用Elasticsearch 1.4 ES vs Solr比较 1.4.1 ES vs Solr 检索速度 2. Lucene全文检索框架 2.1 什么是全文检索 2.2 分词原理之倒排索引…...

编程日记 2023/12/25 6:52:51

【FPGA】分享一些FPGA视频图像处理相关的书籍

在做FPGA工程师的这些年&#xff0c;买过好多书&#xff0c;也看过好多书&#xff0c;分享一下。 后续会慢慢的补充书评。 【FPGA】分享一些FPGA入门学习的书籍【FPGA】分享一些FPGA协同MATLAB开发的书籍 【FPGA】分享一些FPGA视频图像处理相关的书籍 【FPGA】分享一些FPGA高速…...

编程日记 2023/12/25 6:51:50

拆解Meta Ray-Ban同款主控：高通AR1芯片如何让AI眼镜‘听懂’你的手势和眼神？

高通AR1芯片如何赋能Meta Ray-Ban&#xff1a;从异构计算到交互革命 当你的眼镜能读懂眼神、响应手势&#xff0c;甚至预判你的需求时&#xff0c;科技与日常的边界便被重新定义。Meta Ray-Ban智能眼镜之所以成为现象级产品&#xff0c;核心秘密藏在仅指甲盖大小的高通AR1芯片中…...

编程新知 2026/4/2 0:30:58

OpenClaw Exec Approvals 机制：在安全与效率之间寻找平衡

OpenClaw Exec Approvals 机制&#xff1a;在安全与效率之间寻找平衡当你第一次看到 /approve 弹窗时&#xff0c;是选择 allow-once 还是 allow-always&#xff1f;这个看似简单的决定&#xff0c;背后是安全与便利的永恒博弈。引言 在 Agent 开发和工作流自动化的世界里&…...

编程新知 2026/4/2 0:26:55

C++笔记 继承关系中构造和析构顺序（面向对象）

在C面向对象编程中&#xff0c;继承是实现代码复用和类层次设计的核心特性。当存在基类与派生类的继承关系时&#xff0c;构造函数和析构函数的调用顺序有严格的规则——这不仅是面试高频考点&#xff0c;更是避免内存泄漏、保证对象正确初始化/清理的关键。核心结论先明确&…...

编程新知 2026/4/1 23:52:37

3个实战场景×5个核心技巧：Umi-OCR本地化部署与效率提升完全指南

3个实战场景5个核心技巧&#xff1a;Umi-OCR本地化部署与效率提升完全指南 【免费下载链接】Umi-OCR OCR software, free and offline. 开源、免费的离线OCR软件。支持截屏/批量导入图片&#xff0c;PDF文档识别&#xff0c;排除水印/页眉页脚&#xff0c;扫描/生成二维码。内置…...

编程新知 2026/4/1 21:12:15

OpenHarmony基线移植实战：从开源仓到定制仓的完整路径

1. 为什么需要移植OpenHarmony基线&#xff1f; 第一次接触OpenHarmony基线移植时&#xff0c;我也很困惑&#xff1a;为什么不能直接用官方开源代码&#xff1f;非要折腾这一套移植流程&#xff1f;直到在实际项目中踩了几个坑才明白&#xff0c;基线移植是产品开发的必经之路…...

编程新知 2026/4/1 20:07:37

Qwen3-VL-30B部署避坑指南：从下载到运行一气呵成

Qwen3-VL-30B部署避坑指南&#xff1a;从下载到运行一气呵成 1. 为什么选择Qwen3-VL-30B Qwen3-VL-30B是目前通义千问系列中最强大的视觉-语言模型&#xff0c;它在多个方面实现了显著提升&#xff1a; 更优秀的文本理解和生成&#xff1a;能够处理复杂语义和长文本更深入的…...

编程新知 2026/4/1 20:03:36

QT 5.14.0实战：手把手教你用QLineEdit打造一个带验证码的登录框（附完整样式代码）

QT 5.14.0实战&#xff1a;手把手教你用QLineEdit打造一个带验证码的登录框&#xff08;附完整样式代码&#xff09; 在GUI开发中&#xff0c;登录界面是最基础也最考验细节的组件之一。一个优秀的登录框不仅需要功能完整&#xff0c;还要在用户体验上下足功夫——比如实时输入…...

编程新知 2026/4/1 19:25:08

CLIP图文匹配测试工具：5分钟本地部署，零基础验证AI识图能力

CLIP图文匹配测试工具&#xff1a;5分钟本地部署&#xff0c;零基础验证AI识图能力 1. 工具简介与核心价值 你是否遇到过这样的场景&#xff1a;手头有一批产品图片&#xff0c;需要快速判断它们与哪些文字描述最匹配&#xff1f;或者想验证AI模型是否能准确理解图片内容&…...

编程新知 2026/4/1 17:51:33

PakePlus云打包入门指南：从零到一的GitHub Token配置与安全实践

PakePlus云打包入门指南&#xff1a;从零到一的GitHub Token配置与安全实践 【免费下载链接】PakePlus Turn any webpage/HTML/Vue/React and so on into desktop and mobile app under 5M with easy in few minutes. 轻松将任意网站/HTML/Vue/React等项目构建为轻量级(小于5M)…...

编程新知 2026/4/1 17:47:28

一篇文章彻底搞懂Linux驱动的并发控制与中断上下半部机制

在嵌入式 Linux 驱动开发中&#xff0c;并发控制与中断处于极其重要的核心地位。本文&#xff0c;我将结合 CPU 的行为与操作系统的调度&#xff0c;深入分析 spinlock 和 mutex 的本质区别&#xff0c;以及 Linux 中断上下半部。1. 上下文的概念 在深入探究锁和中断之前&#…...

编程新知 2026/4/1 17:41:25