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

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

news 2026/3/28 6:46:04

一、事件总线

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

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(七)-基础入门之事件总线与动态组件

一、事件总线事件总线使用场景： 两个兄弟组件之间的传参，或者两个没有关联的组件之间的传参 html ：引入 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. 背景关于抗震性能化设计，之前一直理解的很模糊&#…...

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

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

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

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

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基础语法学习

官网文档地址：绑定 / 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中，mysql模块是实现MySQL协议的JavaScript客户端工具。Node.js程序通过与MySQL建立链接，然后可对数据进行增、删、改、查等操作。安装由于mysql模块不是Node.js内置模块，需手动安装 npm i mysql注意：若MySQL服…...

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

网络通信协议

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

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

Spark集群部署与架构

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

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

DshanMCU-R128s2 SDK 架构与目录结构

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

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

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

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

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

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

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

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

【Python】Python 批量转换PDF到Excel

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

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

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

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

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

微信小程序promise封装

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

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

hash长度扩展攻击

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

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

设计模式--命令模式

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

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

单例模式的七种写法

为什么使用单例？ 避免重复创建对象,节省内存,方便管理;一般我们在工具类中频繁使用单例模式; 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（简称ES） 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