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

【Vue3】3-3 : 组件之间是如何进行互相通信的

news 2025/12/23 23:55:42
本书目录：点击进入

一、组件之间为什么要做通信

二、组件之间通信方式

2.1、父传子：由传递属性实现

stage 1：申明 （即定义）

stage 2：注册

stage 3：使用

【示例】：父组件将 title 和 count 传递给子组件 （普通数据 和 响应式数据的传递）

＞  代码 

＞  效果

2.2、子传父：由自定义事件实现 

stage 1：申明 （即 父组件：定义方法 + 子组件：调用方法）

stage 2：注册

stage 3：使用

 【示例】：子组件将 data 传递给父组件 

＞  代码 

＞  效果

一、组件之间为什么要做通信

  • 主要是为了让组件满足不同的需求

如：

  • 评分组件显示：由5颗星变成10颗星
  • 按钮组件显示：红色删除，比较危险

二、组件之间通信方式

vue中有4-5种，本节介绍最常见的 

  • 父子通信

2.1、父传子：由传递属性实现

stage 1：申明 （即定义）

stage 2：注册

stage 3：使用

【示例】：父组件将 title 和 count 传递给子组件 （普通数据 和 响应式数据的传递）

  • 普通数据：title="hello world" ，无法响应式修改数据

  • 响应式数据 :count="count"

＞  代码 
<body><div id="app"><my-head title="hello world" :count="count"></my-head></div><script>let app = Vue.createApp({data(){return {count: 10,title: "hello vue3"}},mounted(){setTimeout(()=>{this.title = "hello vue3";this.count = 20;}, 2000)}})app.component('MyHead', {props: {'count': {type: Number}},props: ['title', 'count'],template: `<header><div>{{ title }},{{ count }}</div><h2>logo</h2><ul><li>首页</li><li>视频</li><li>音乐</li></ul></header>`});let vm = app.mount('#app');</script>
</body>
＞  效果

2.2、子传父：由自定义事件实现 

stage 1：申明 （即 父组件：定义方法 + 子组件：调用方法）

stage 2：注册

stage 3：使用

 【示例】：子组件将 data 传递给父组件 

＞  代码 
<body>
<div id="app"><div>{{message}}</div><my-head @custom-click="handleClick"></my-head></div><script>let app = Vue.createApp({data(){return {message: "app Data"}},methods: {handleClick(data){// console.log(data);this.message = data;}}})app.component('MyHead', {emits: ['custom-click'], template: `<header><h2>logo</h2><ul><li>首页</li><li>视频</li><li>音乐</li></ul></header>`,mounted(){setTimeout(()=>{this.$emit('custom-click', 'MyHead Data')}, 2000)}});let vm = app.mount('#app');</script>
</body>
＞  效果

相关文章：

【Vue3】3-3 : 组件之间是如何进行互相通信的

本书目录&#xff1a;点击进入 一、组件之间为什么要做通信 二、组件之间通信方式 2.1、父传子&#xff1a;由传递属性实现 stage 1&#xff1a;申明 &#xff08;即定义&#xff09; stage 2&#xff1a;注册 stage 3&#xff1a;使用 【示例】&#xff1a;父组件将 tit…...

编程日记 2024/1/20 4:10:52

网络端口映射和端口转发的区别和联系

目 录 一、端口映射技术 1.1 原理 1.2 应用场景 1、远程访问 2、游戏主机 3、文件共享 4、监控视频共享 二、端口转发技术 2.1 原理 2.2 应用场景 1、网络负载均衡 2、网络安全 3、网络代理 三、端口映射和转发的实现方法 3.1 路由器配置 3.2 网络防火墙 …...

编程日记 2024/1/20 4:08:50

VLSI超大规模集成电路设计复习

目录 VLSI超大规模集成电路设计复习引论MOS原理延时组合逻辑时序电路SRAM 总结&#xff08;一张纸&#xff09;参考资料 VLSI超大规模集成电路设计复习 复习可参照官网PPT上的知识点&#xff0c;然后根据知识点对应的去看书上的讲解。 引论 摩尔定律 尺寸缩小定律 N、P型半…...

编程日记 2024/1/20 4:06:47

GCC 内联汇编

LINUX下的汇编入门 AT&T风格 汇编 和GCC风格汇编 汇编代码的调试 前面写了三篇,是自我摸索三篇,摸着石头过河,有些或许是错误的细节,不必在意! 今天我们直接用GCC编译C语言代码,且在C语言里面内嵌AT&T风格的汇编! 前三篇大家了解即可,我们重点放在内嵌汇编里,简单快…...

编程日记 2024/1/20 4:02:44

springboot整合websocket后启动报错：javax.websocket.server.ServerContainer not available

一、场景 Springboot使用ServerEndpoint来建立websocket链接。引入依赖。 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency>配置Websocket Confi…...

编程日记 2024/1/20 4:01:43

Vue面试之生命周期（上篇）

Vue面试之生命周期（上篇） 创建阶段beforeCreatecreated挂载阶段beforeMountmounted更新阶段beforeUpdateupdated销毁阶段beforeDestroydestroyed补充说明activated...

编程日记 2024/1/20 3:59:41

Gin 框架之用户密码加密

文章目录 一、引入二、密码加密位置三、如何加密四、bcrypt 库加密4.1 介绍4.2 优点&#xff1a;4.3 使用 五、小黄书密码加密实践 一、引入 Gin是一个用Go语言编写的Web框架&#xff0c;而用户密码的加密通常是在应用程序中处理用户身份验证时的一个重要问题。 通常敏感信息…...

编程日记 2024/1/20 3:57:39

【创作活动】ChatGPT 和文心一言哪个更好用？

文章目录 文心一言优点缺点 ChatGPT优点缺点 Java编码能力比较对人工智能的看法 ChatGPT是由OpenAI开发的交互式AI大模型&#xff0c; 文心一言是由百度研发的知识增强大语言模型&#xff0c;本文从Java开发的角度对比一下哪个更好用&#xff08;本文仅用于投稿CSDN创造活动&am…...

编程日记 2024/1/20 3:56:38

【linux】查看Debian应用程序图标对应的可执行命令

在Debian系统中&#xff0c;应用程序图标通常与.desktop文件关联。您可以通过查看.desktop文件来找到对应的可执行命令。这些文件通常位于/usr/share/applications/或~/.local/share/applications/目录下。这里是如何查找的步骤&#xff1a; 1. 打开文件管理器或终端。 2. 导…...

编程日记 2024/1/20 3:54:36

TortoiseSVN客户端如何安装配置并实现公网访问服务端提交文件到本地服务器

文章目录 前言1. TortoiseSVN 客户端下载安装2. 创建检出文件夹3. 创建与提交文件4. 公网访问测试 前言 TortoiseSVN是一个开源的版本控制系统&#xff0c;它与Apache Subversion&#xff08;SVN&#xff09;集成在一起&#xff0c;提供了一个用户友好的界面&#xff0c;方便用…...

编程日记 2024/1/20 3:53:33

【AUTOSAR】RTE 接口类型、应用场景差别及实例讲解

目录 摘要 概念 CS接口 SR接口 接口选择 对于CPU负载率的影响...

编程日记 2024/1/20 3:51:32

Qt应用开发(安卓篇)——Hello Qt On Android

一、前言 这一篇从实际出发&#xff0c;讲述如何创建、编译和部署Qt On Android项目。 二、ADB调试 ADB的全称为Android Debug Bridge&#xff0c;就是起到调试桥的作用&#xff0c;主要用于连接计算机与Android 设备&#xff0c;以便进行调试和数据传输。ADB 可以实现以下主要…...

编程日记 2024/1/20 3:49:30

第十三讲_css 伸缩盒模型flex

css 伸缩盒模型flex 1. 伸缩盒模型介绍2. 伸缩盒模型的主轴方向3. 伸缩盒模型的主轴换行4. 主轴上的对齐方式5. 侧轴上对齐方式5.1 一行的侧轴上对齐方式5.2 多行的侧轴上对齐方式 6. 伸缩项目的伸缩性6.1 伸缩项目在主轴上的基准长度6.2 伸缩项目的放大6.3 伸缩项目的缩小 7. …...

编程日记 2024/1/20 3:46:27

【C++干货铺】C++11常用新特性 | 列表初始化 | STL中的变化

个人主页点击直达&#xff1a;小白不是程序媛 C系列专栏&#xff1a;C干货铺 代码仓库&#xff1a;Gitee 目录 C11简介 列表初始化 std::initializer_list std::initializer_list使用场景 decltype关键字 STL中的一些变化 新容器 array forward_list 容器中的一些新…...

编程日记 2024/1/20 3:41:23

k8s的对外服务---ingress

service的作用体现在两个方面&#xff1a; 集群内部&#xff1a;不断追踪pod的变化。他会更新endpoint中的pod对象&#xff0c;基于pod的IP地址不断变化的一种服务发现机制。 集群外部&#xff1a;类似负载均衡器&#xff0c;把流量IP端口&#xff0c;不涉及转发url(http、htt…...

编程日记 2024/1/20 3:37:19

element-ui的el-upload组件实现上传拖拽排序图片顺序（sortablejs）

<template><!-- 省略其他配置 --><el-upload ref"upload" :file-list.sync"fileList"></el-upload></template><script>import Sortable from sortablejs;export default {data() {return {fileList: []};},mounted()…...

编程日记 2024/1/20 3:36:18

【PS】PS设计图欣赏、学习、借鉴

【PS】PS设计图欣赏、学习、借鉴 bilibili萌新PS学习计划&#xff1a;PS教程全套零基础教学视频&#xff08;全套81节全新版本&#xff09;...

编程日记 2024/1/20 3:32:15

游戏云化好吗？游戏云化会带来什么?

随着云计算技术的飞速发展&#xff0c;游戏云化成为游戏产业中备受关注的话题。这一新兴技术给玩家和游戏行业带来了全新的可能性。本文将深入探讨游戏云化的概念、优势以及可能带来的影响。 1、什么是游戏云化&#xff1f; 游戏云化是指将游戏的各个环节&#xff0c;包括游戏…...

编程日记 2024/1/20 3:31:14

制造业企业数字化转型难点剖析及解决之法

导语 全球正在由工业经济向数字经济转型过渡&#xff0c;制造业正在且并将长期处于数字化转型发展阶段&#xff0c;并沿着数字化、网络化、智能化阶段不断跃升。但如何找准数字化转型的切入点&#xff0c;以低耗能、低成本、高效率的方式加快制造业转型升级的步伐&#xff0c;仍…...

编程日记 2024/1/20 3:29:12

golang 服务端遇到strict-origin-when-cross-origin，解决跨域整理

golang 服务端遇到strict-origin-when-cross-origin&#xff0c;解决跨域整理 以下内容由chatgpt中文网 动态生成,助力开发找我 代码汇总&#xff1a; func Cors() gin.HandlerFunc {return func(c *gin.Context) {method : c.Request.Methodorigin : c.Request.Header.Get(…...

编程日记 2024/1/20 3:28:11

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2025/12/23 23:32:15

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/11/20 2:48:44

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

编程新知 2025/11/25 5:13:22

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

编程新知 2025/12/23 17:54:24

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

编程新知 2025/12/22 12:07:54

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/12/23 17:14:55

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

编程新知 2025/12/11 16:21:02

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

编程新知 2025/12/12 6:01:17

sipsak：SIP瑞士军刀！全参数详细教程！Kali Linux教程！

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

编程新知 2025/12/10 8:12:54

Java毕业设计：WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

编程新知 2025/10/27 13:29:11