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

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

news 文章来源：https://blog.csdn.net/weixin_43520586/article/details/135189923 2024/9/21 22:30:37

一、事件总线

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

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

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

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

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

AUTOSAR从入门到精通-车载以太网（四）

目录前言原理车载以太网发展历史为何选择车载以太网...

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

MySQL报错：1054 - Unknown column ‘xx‘ in ‘field list的解决方法

我在操作MySQL遇到1054报错，报错内容：1054 - Unknown column Cindy in field list，下面演示解决方法，非常简单。根据箭头指示，Cindy对应的应该是VARCHAR文本数字类型，字符串要用引号，所以解决方…...

编程日记 2023/12/25 6:45:44

【Android 13】使用Android Studio调试系统应用之Settings移植（四）：40+个依赖子模块之ActionBarShadow

文章目录一、篇头二、系列文章2.1 Android 13 系列文章2.2 Android 9 系列文章2.3 Android 11 系列文章三、子模块AS移植3.1 AS创建目标3.2 创建ActionBarShadow（1）使用VS Code打开org_settings/SettingsLib目录（2）ActionBarShadow的Manifest.xml（3）ActionBarShadow的An…...

编程日记 2023/12/25 6:43:42

nosql-redis整合测试

nosql-redis整合测试 1、创建项目并导入redis2、配置redis3、写测试类4、在redis中创建key5、访问80826、在集成测试中测试方法 1、创建项目并导入redis 2、配置redis 3、写测试类 4、在redis中创建key 5、访问8082 6、在集成测试中测试方法 package com.example.boot3.redis;…...

编程日记 2023/12/25 6:41:41

智能化中的控制与自动化中的控制不同

智能化中的控制相对于自动化中的控制更加灵活、智能、综合和学习能力强。智能化控制系统能够根据实际情况进行自主决策和优化，适用范围更广，效果更好。首先，智能化控制系统能够根据外部环境的变化和实时数据的反馈来自主调整和优化控制策略&…...

编程日记 2023/12/25 6:40:39

java练习题之多态练习

1：关于多态描述错误的是(D) A. 父类型的引用指向不同的子类对象 B. 用引用调用方法，只能调用引用中声明的方法 C. 如果子类覆盖了父类中方法，则调用子类覆盖后的方法 D. 子类对象类型会随着引用类型的改变而改变 2：class Supe…...

编程日记 2023/12/25 6:39:38

[原创][R语言]股票分析实战[4]:周级别涨幅趋势的相关性

[简介] 常用网名: 猪头三出生日期: 1981.XX.XX QQ联系: 643439947 个人网站: 80x86汇编小站 https://www.x86asm.org 编程生涯: 2001年~至今[共22年] 职业生涯: 20年开发语言: C/C、80x86ASM、PHP、Perl、Objective-C、Object Pascal、C#、Python 开发工具: Visual Studio、D…...

编程日记 2023/12/25 6:36:35

esp32使用lvgl，给图片取模显示图片

使用LVGL官方工具。 https://lvgl.io/tools/imageconverter 上传图片，如果想要透明效果，那么选择输出格式C array，点击Convert进行转换。下载.c文件放置到工程下使用即可。...

编程日记 2023/12/25 6:31:30

R语言使用scitb包10分钟快速绘制论文基线表

scitb包目前进行了升级到1.7版本了，我做了一个操作视频，如何快速绘制基线表。 scitb包绘制基线表可以配套看下我的关于scitb包文章理解一下 scitb包1.6版本发布，一个为制作专业统计表格而生的R包...

编程日记 2023/12/25 6:29:28

类和对象

1 类定义： class ChecksumAccumulator {// class definition goes here } 你就能创建 ChecksumAccumulator 对象：new CheckSumAccumulator 注：1scala类中成员默认是public类型，若设为私有属性则必须加private关键字。在scala中是…...

编程日记 2023/12/25 6:28:26

Py之tensorflow-addons：tensorflow-addons的简介、安装、使用方法之详细攻略

Py之tensorflow-addons：tensorflow-addons的简介、安装、使用方法之详细攻略目录 tensorflow-addons的简介 tensorflow-addons的安装 tensorflow-addons的使用方法 1、使用 TensorFlow Addons 中的功能： tensorflow-addons的简介 TensorFlow Addon…...

编程日记 2023/12/25 6:27:25

STM32G4x FLASH 读写配置结构体（LL库下使用）

主要工作就是把HAL的超时用LL库延时替代，保留了中断擦写模式、轮询等待擦写，我已经验证了部分。笔者用的芯片为STM32G473CBT6 128KB Flash，开环环境为CUBEMXMDK5.32，因为G4已经没有标准库了，笔者还是习惯使用标准库的…...

编程日记 2023/12/25 6:25:24

【AI提示词人物篇】创新艺术未来，让科技改变想象空间

AI 绘画学习难度和练习技巧学习绘画的技巧学习能难度： 外貌特征：AI需要学习识别和理解各种外貌特征，如发型、肤色、眼睛颜色等。这可能需要大量的训练数据和复杂的模型架构。镜头提示：AI需要学习理解不同镜头提示的含义&…...

编程日记 2023/12/25 6:23:21

登录shell与非登录shell、交互式与非交互式shell的知识点详细总结

一、登录shell与非登录shell 1.登录shell定义：指的是当用户登录系统时所取的那个shell，登录shell属于交互式shell。登陆shell通常指的是：用户通过输入用户名/密码（或证书认证）后启动的shell.例如： 当时…...

编程日记 2023/12/25 6:22:20

【教学类-42-02】20231224 X-Y 之间加法题判断题2.0（按2:8比例抽取正确题和错误题）

作品展示： 0-5： 21题，正确21题，错误21题42题。小于44格子，都写上，哪怕输入2:8，实际也是5:5 0-10 66题，正确66题，错误66题132题大于44格子，正确66题抽取44*…...

编程日记 2023/12/25 6:19:16

轻量Http客户端工具VSCode和IDEA

文章目录前言Visual Studio Code 的插件 REST Client编写第一个案例进阶，设置变量进阶，设置Token IntelliJ IDEA 的 HTTP请求构建http脚本HTTP的环境配置结果值暂存前言作为一个WEB工程师，在日常的使用过程中，HTTP请求是必不可…...

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

机器学习或深度学习的数据读取工作（大数据处理）

机器学习或深度学习的数据读取工作（大数据处理）主要是.split和re.findall和glob.glob运用。读取文件的路径（为了获得文件内容）和提取文件路径中感兴趣的东西(标签) 1，“glob.glob”用于读取文件路径 2，“.…...

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

Rust 生命周期

Rust 第17节生命周期先看一段错误代码 /* //一段错误的代码 // Rust 编译时会报错； */let r;{let x 5;r &x;}println!("{}",r);Rust 在编译时使用借用检查器， 比较作用域来检查所有的借用是否合法； 很明显；r…...

编程日记 2023/12/25 6:12:10

【论文解读】CNN-Based Fast HEVC Quantization Parameter Mode Decision

时间：2019 年级别：SCI 机构：南京信息工程大学摘要随着多媒体呈现技术、图像采集技术和互联网行业的发展，远程通信的方式已经从以前的书信、音频转变为现在的音频/视频。和视频在工作、学习和娱乐中的比例不断提高&#xff0…...

编程日记 2023/12/25 6:10:08

在Linux上安装CLion

本教程将指导你如何在Linux系统上安装CLion，下载地址为：https://download.jetbrains.com.cn/cpp/CLion-2022.3.3.tar.gz。以下是详细的安装步骤： 步骤1：下载CLion 首先，你需要使用wget命令从提供的URL下载CLion的tar…...

编程日记 2023/12/25 6:08:05

R语言贝叶斯网络模型、INLA下的贝叶斯回归、R语言现代贝叶斯统计学方法、R语言混合效应（多水平/层次/嵌套）模型

目录㈠基于R语言的贝叶斯网络模型的实践技术应用㈡ R语言贝叶斯方法在生态环境领域中的高阶技术应用㈢基于R语言贝叶斯进阶:INLA下的贝叶斯回归、生存分析、随机游走、广义可加模型、极端数据的贝叶斯分析㈣基于R语言的现代贝叶斯统计学方法（贝叶斯参数估…...

编程日记 2023/12/25 6:07:05

多维时序 | Matlab实现PSO-GCNN粒子群优化分组卷积神经网络多变量时间序列预测

多维时序 | Matlab实现PSO-GCNN粒子群优化分组卷积神经网络多变量时间序列预测目录多维时序 | Matlab实现PSO-GCNN粒子群优化分组卷积神经网络多变量时间序列预测预测效果基本介绍模型描述程序设计参考资料预测效果基本介绍 Matlab实现PSO-GCNN粒子群优化分组卷积神经网络多…...

编程日记 2023/12/25 5:59:58

Oracle 学习（1）

Oracle简介 Oracle是殷墟（yīn Xu）出土的甲骨文（oracle bone inscriptions）的英文翻译的第一个单词，在英语里是“神谕”的意思。Oracle公司成立于1977年，总部位于美国加州，是世界领先的信息管…...

编程日记 2023/12/25 5:58:57

华为HCIA认证H12-811题库新增

801、[单选题]178/832、在系统视图下键入什么命令可以切换到用户视图? A quit B souter C system-view D user-view 试题答案：A 试题解析：在系统视图下键入quit命令退出到用户视图。因此答案选A。 802、[单选题]“网络管理员在三层交换机上创建了V…...

编程日记 2023/12/25 5:54:53

Nginx Unit 1.27.0 发布

目录介绍更新内容将 HTTP 请求重定向到 HTTPS 为纯路径 URI 提供可配置的文件名完整的更新日志其他平台更新介绍 Nginx Unit 是一个动态应用服务器，能够与 Nginx Plus 和 Nginx 开源版并行或独立运行。Nginx Unit 支持 RESTful JSON API，…...

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

【影像组学入门百问】#32—#34

#32-影像组学研究过程中，图像重采样参数怎么选择？ 在影像组学研究过程中，选择合适的图像重采样参数对于保证分析质量和准确性至关重要。以下是在选择图像重采样参数时需要考虑的一些建议： 1.目标分辨率：首先&#…...

编程日记 2023/12/25 5:48:48

YOLOv5代码解析——yolo.py

yolo.py的主要功能是构建模型。 1、最主要的函数是parse_model，用于解析yaml文件，并根据解析的结果搭建网络。这个函数的注释如下： def parse_model(d, ch): # model_dict, input_channels(3)"""解析模型文件，并…...

编程日记 2023/12/25 5:47:47

4种feature classification在代码的实现上是怎么样的？Linear / MLP / CNN / Attention-Based Heads

具体的分类效果可以看：【Arxiv 2023】Diffusion Models Beat GANs on Image Classification 1、线性分类器 (Linear, A) 使用一个简单的线性层，通常与一个激活函数结合使用。 import torch.nn as nnclass LinearClassifier(nn.Module):def __init__(se…...

编程日记 2023/12/25 5:46:45

springboot集成websocket全全全！！！

一、界面展示二、前置了解 1.什么是websocket WebSocket是一种在单个TCP连接上进行全双工通信的持久化协议。全双工协议就是客户端可以给我们服务器发数据服务器也可以主动给客户端发数据。 2.为什么有了http协议还要websocket 协议 http协议是一种无状态，非…...

编程日记 2023/12/25 5:44:43

一、事件总线

二、动态组件

相关文章：