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

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

news 2026/5/17 2:21:51

一、事件总线

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

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

VTube Studio完整指南：从零开始打造你的虚拟主播形象

VTube Studio完整指南&#xff1a;从零开始打造你的虚拟主播形象 【免费下载链接】VTubeStudio VTube Studio API Development Page 项目地址: https://gitcode.com/gh_mirrors/vt/VTubeStudio 想要成为一名虚拟主播&#xff0c;却担心技术门槛太高&#xff1f;VTube St…...

编程新知 2026/5/17 0:50:15

Termux安装Linux总失败？可能是你的安卓版本太老了！手把手解决apt update报错

Termux在老旧安卓设备上的终极解决方案&#xff1a;从原理到实践 你是否也曾在抽屉深处翻出一台尘封多年的安卓设备&#xff0c;满心欢喜地想要通过Termux让它重获新生&#xff0c;却在apt update的报错信息前铩羽而归&#xff1f;这并非个例——据统计&#xff0c;全球仍有超过…...

编程新知 2026/5/16 23:13:48

在STM32F103上用FreeRTOS模拟I2C，为什么我劝你放弃硬件I2C？

为什么在STM32F103上使用FreeRTOS时&#xff0c;模拟I2C比硬件I2C更靠谱&#xff1f; 如果你正在使用STM32F103开发项目&#xff0c;并且需要在FreeRTOS环境下实现I2C通信&#xff0c;那么这篇文章可能会改变你的技术选型决策。很多开发者初次接触STM32时&#xff0c;都会优先考…...

编程新知 2026/5/16 22:22:24

【运维篇 / 实战】❀ 邮件告警的自动化配置与故障排查 ❀ FortiGate 防火墙

1. 邮件告警功能的价值与场景 想象一下这样的场景&#xff1a;凌晨三点&#xff0c;公司防火墙突然检测到大规模DDoS攻击&#xff0c;而此时所有运维人员都在睡梦中。等到第二天上班才发现&#xff0c;业务系统已经瘫痪了整整五个小时。这种"事后诸葛亮"的窘境&…...

编程新知 2026/5/16 21:45:26

嵌入式Linux SPI转CAN-FD扩展实战：基于i.MX8MP与MCP2518FD

1. 项目概述&#xff1a;当开发板的CAN口不够用时在嵌入式产品开发中&#xff0c;尤其是工业控制、汽车电子或机器人领域&#xff0c;CAN总线因其高可靠性和实时性被广泛应用。飞凌嵌入式的OKMX8MP-C开发板基于强大的i.MX8M Plus处理器&#xff0c;原生提供了两路CAN-FD总线&am…...

编程新知 2026/5/16 21:17:49

League Akari：英雄联盟玩家的智能游戏助手

League Akari&#xff1a;英雄联盟玩家的智能游戏助手 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power &#x1f680;. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 你是否厌倦了在英雄联盟中重复繁琐的准备…...

编程新知 2026/5/16 21:11:36

原子化《清单革命》的庖丁解牛

它的本质是&#xff1a;承认人类大脑在 高负荷、高压力、高复杂度 环境下的 不可靠性 (Unreliability)&#xff0c;通过将 关键检查点 (Critical Checkpoints) 和 标准操作程序 (SOP) 外化为 静态数据结构 (Static Data Structure/List)&#xff0c;来弥补 工作记忆 (Working M…...

编程新知 2026/5/16 20:09:15

暗黑3终极按键助手D3KeyHelper：图形化配置解放你的双手

暗黑3终极按键助手D3KeyHelper&#xff1a;图形化配置解放你的双手 【免费下载链接】D3keyHelper D3KeyHelper是一个有图形界面&#xff0c;可自定义配置的暗黑3鼠标宏工具。 项目地址: https://gitcode.com/gh_mirrors/d3/D3keyHelper 还在为暗黑破坏神3中繁琐的技能按…...

编程新知 2026/5/16 19:47:53

钱学森物理大一统：宇宙速度阶梯尺 全套公版正式文档（带可计算代码）

宇宙速度阶梯尺 全套公版正式文档 &#xff08;无版权全开源全民通用可直接印刷发布/平台投稿/社区分发&#xff09; 开篇总纲 定名&#xff1a;本源速度阶梯尺 核心主旨&#xff1a;大道至简&#xff0c;以地球天然标准音速为万物速度本源基底&#xff0c;以宇宙真空光速为速度…...

编程新知 2026/5/16 19:41:50

2026届学术党必备的降重复率神器实际效果

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 人工智能技术飞速发展着&#xff0c;学术研究和论文创作领域迎来了深刻变革&#xff0c;维普…...

编程新知 2026/5/16 19:19:24