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

vue组件的通信

news 2026/5/19 3:26:12

文章目录

  • 组件通信
    • 父传子
      • 父传子:通过prop来进行通信
    • 子传父
      • 先在父组件用@注册方法 , 在子组件触发使用 emit 函数
    • 组件间通信-平行组件
      • 使用事件总线的方法,也就是把整个vue提出来,当为一个事件总线
    • 其他组件通信
      • 父组件 provide来提供变量,然后再子组件中通过inject来注入变量

组件通信

父传子

父传子:通过prop来进行通信

        // 1.在子组件中声明props接收在父组件挂载的属性// 2.可以在子组件的template中任意使用// 3.在父组件绑定自定义的属性
<body><div id="app"><!-- 3.使用子组件 --><App></App></div><script src="./vue.js"></script><script>// 全局组件// 父传子:通过prop来进行通信// 1.在子组件中声明props接收在父组件挂载的属性// 2.可以在子组件的template中任意使用// 3.在父组件绑定自定义的属性Vue.component('Child',{template:`<div><h3>我是一个子组件</h3>   <h4>{{childData}}</h4></div>`,props:['childData']})const App = {data() {return {msg: '我是父组件传进来的值'}},template: `<div><Child :childData = 'msg'></Child></div>`,computed: {}}new Vue({el: '#app',data: {},components: {// 2.挂载子组件App}})</script>
</body>

效果

在这里插入图片描述

子传父

先在父组件用@注册方法 , 在子组件触发使用 emit 函数

<body><div id="app"><!-- 3.使用子组件 --><App></App></div><script src="./vue.js"></script><script>// 全局组件// 子往父传值// 1. 在父组件中 子组件上绑定自定义事件// 2. 在子组件中 触发原生的事件 // 3. 在事件函数通过this.$emit触发自定义的事件Vue.component('Child', {template: `<div><h3>我是一个子组件</h3>   <h4>{{childData}}</h4><input type="text" @input = 'handleInput'/></div>`,props: ['childData'],methods:{handleInput(e){const val = e.target.value;this.$emit('inputHandler',val);}},})const App = {data() {return {msg: '我是父组件传进来的值',newVal:''}},methods:{input(newVal){// console.log(newVal);this.newVal = newVal;}},template: `<div><div class='father'>数据:{{newVal}}</div><Child :childData = 'msg' @inputHandler = 'input'></Child></div>`,computed: {}}new Vue({el: '#app',data: {},components: {// 2.挂载子组件App}})</script>
</body>

效果 输入框输入数据 顶部数据同步变化

在这里插入图片描述

组件间通信-平行组件

使用事件总线的方法,也就是把整个vue提出来,当为一个事件总线

               const bus = new Vue();// 1. 中央事件总线 bus// 2. $on 绑定事件bus.$on('add',(n)=>{this.count+=n;})// 3.触发绑定的函数 // $emit 触发事件bus.$emit('add',1);

具体代码

<body><div id="app"><!-- 3.使用子组件 --><App></App></div><script src="./vue.js"></script><script>const bus = new Vue();// 中央事件总线 busVue.component('B', {data() {return {count: 0}},template: `<div>{{count}}</div>`,created(){// $on 绑定事件bus.$on('add',(n)=>{this.count+=n;})}})Vue.component('A', {data() {return {}},template: `<div><button @click='handleClick'>加入购物车</button> </div>`,methods:{handleClick(){// 触发绑定的函数 // $emit 触发事件bus.$emit('add',1);}}})const App = {data() {return {}},template: `<div><A></A><B></B></div>`,}new Vue({el: '#app',data: {},components: {// 2.挂载子组件App}})</script>
</body>

点击加入购物车 下面数字自动加一

在这里插入图片描述

其他组件通信

如果层级很深的情况,比如有嵌套情况,可使用provide和inject

父组件 provide来提供变量,然后再子组件中通过inject来注入变量

<body><div id="app"><!-- 3.使用子组件 --><App></App></div><script src="./vue.js"></script><script>// 插槽 留坑// props 验证规则// 组件的生命周期// UI库 element-ui// **** 如何设计组件? *****// provide// inject// 父组件 provide来提供变量,然后再子组件中通过inject来注入变量.无论组件嵌套多深// 中央事件总线 busVue.component('B', {data() {return {count: 0}},inject:['msg'],created(){console.log(this.msg);},template: `<div>{{msg}}</div>`,})Vue.component('A', {data() {return {}},created(){// console.log(this.$parent.$parent);// console.log(this.$children);console.log(this);},template: `<div><B></B></div>`})const App = {data() {return {title:"老爹"}},provide(){return {msg:"老爹的数据"}},template: `<div><A></A></div>`,}new Vue({el: '#app',data: {},components: {// 2.挂载子组件App}})</script>
</body>

相关文章：

vue组件的通信

文章目录 组件通信父传子父传子:通过prop来进行通信 子传父先在父组件用注册方法 , 在子组件触发使用 emit 函数 组件间通信-平行组件使用事件总线的方法,也就是把整个vue提出来,当为一个事件总线 其他组件通信父组件 provide来提供变量,然后再子组件中通过inject来注入变量 组…...

编程日记 2023/9/26 10:10:49

(搞定)排序数据结构(1)插入排序 选择排序+冒泡排序

目录 本章内容如下 一:插入排序 1.1插入排序 1.2希尔排序 二&#xff1a;选择排序 2.1选择排序 三:交换排序 3.1冒泡排序 一:插入排序 1.1直接插入排序 说到排序&#xff0c;其实在我们生活中非常常见&…...

编程日记 2023/9/26 10:09:48

C++ 类访问修饰符 public、private、protected

数据封装是面向对象编程的一个重要特点&#xff0c;它防止函数直接访问类类型的内部成员。类成员的访问限制是通过在类主体内部对各个区域标记 public、private、protected 来指定的。关键字 public、private、protected 称为访问修饰符。 一个类可以有多个 public、protected…...

编程日记 2023/9/26 10:08:47

pytorch学习笔记——BCE与CE

BCELoss的话只需要网络输出一个通道&#xff0c;CE Loss(Cross Entropy Loss)需要输出n_class个通道。 对于二分类任务可以使用CE Loss输出两个通道&#xff0c;也可以使用BCE Loss输出一个通道。 https://www.jianshu.com/p/5b01705368bb https://zhuanlan.zhihu.com/p/372628…...

编程日记 2023/9/26 10:06:44

win使用git（保姆级教程）

序言 上学期间用的git并不多&#xff0c;但是从研三实习以及后面工作来看&#xff0c;git是一项必备技能&#xff0c;所以在此来学习一下。 下载git安装包 打开网站&#xff0c;根据需求来下载&#xff1b;一般按照如下方式进行下载&#xff1a; 然后安装的时候记得按下图勾…...

编程日记 2023/9/26 10:04:42

Python图像处理-----几何变换

文章目录 一、图像几何变换理论二、图像平移2.1 使用数学公式的实现方式为：2.2 使用矩阵实现的方式为2.3 使用opencv三、图像缩放3.1 用数学式子表示为公式(a为缩放系数):3.2 用矩阵表示如公式所示:一、图像几何变换理论 图像几何变换不改变图像的像素值，在图像平面上进行像…...

编程日记 2023/9/26 10:03:41

如何正确选择研究方向？如何实现论文创新？

学术评价是遵循“质量第一”原则的，所以对于研究生来说，从一开始就要把路子走正，自觉树立精品意识，把精力高度集中到提高学位论文的质量上来。这里，根据本人多年来指导博士和硕士研究生的体会，就人文社科研究生学位论文的选题与创新略述管见。 学位论文选题的两个层面 …...

编程日记 2023/9/26 10:01:38

Postgresql源码（113）表达式JIT计算简单分析

相关 《Postgresql源码&#xff08;85&#xff09;查询执行——表达式解析器分析&#xff08;select 11如何执行&#xff09;》 《Postgresql源码&#xff08;113&#xff09;表达式JIT计算简单分析》 1 普通表达式计算 普通表达式计算发生在优化器preprocess_expression中&am…...

编程日记 2023/9/26 10:00:37

CMU15-213 课程笔记 04-Floating Point

文章目录 浮点数如何用二进制表示IEEE 浮点数标准IEEE 浮点数实现IEEE 浮点数在内存里 E exp - bias 计算指数M 1.xxx 尾数计算举例&#xff1a;对一个浮点数进行转换一些关于浮点数的计算等等 浮点数如何用二进制表示 计算机内部的浮点数不是这样存在内存里的&#xff08;至…...

编程日记 2023/9/26 9:59:36

DockerKubernetes ❀ Service下Port端口区分

文章目录 概述案例 概述 在Kubernetes中&#xff0c;Service&#xff08;svc&#xff09;是一种抽象机制&#xff0c;用于将一组 Pod 暴露给其他应用程序或服务。Service 可以有三种类型的端口&#xff1a; nodePort&#xff1a;这是 Service 在节点上公开的端口。可以使用此…...

编程日记 2023/9/26 9:58:35

【C++】笔试训练（一）

目录 一、选择题二、编程1、组队竞赛2、删除公共字符 一、选择题 1、以下for循环的执行次数是&#xff08;&#xff09; for (int x 0, y 0; (y 123) && (x < 4); x);A 是无限循环 B 循环次数不定 C 4次 D 3次 答案&#xff1a;C 2、以下程序的运行结果是&…...

编程日记 2023/9/26 9:57:35

数据结构与算法之集合: Leetcode 349. 两个数组的交集 (Typescript版)

两个数组的交集 https://leetcode.cn/problems/intersection-of-two-arrays/description/ 描述 给定两个数组 nums1 和 nums2 &#xff0c;返回 它们的交集 。输出结果中的每个元素一定是 唯一 的。我们可以 不考虑输出结果的顺序 。 示例 1 输入&#xff1a;nums1 [1,2,…...

编程日记 2023/9/26 9:56:33

Unity 内存性能分析器 (Memory Profiler)

一、 安装 安装有两种方式一&#xff1a; add package : com.unity.memoryprofiler方式二&#xff1a; From Packages : Unity Registry 搜索 Memory Profiler 二、 使用 打开&#xff1a;Windows - > Analysis - > Memory Profiler 打开MemoryProfiler界面&#xff0…...

编程日记 2023/9/26 9:55:32

前端携带Bearer Token

前端携带Bearer Token 在前端使用 axios 发送请求时&#xff0c;可以通过设置请求头来携带 Bearer Token。Bearer Token 是一种常用的身份验证方式&#xff0c;它通常用于 OAuth2 授权流程中。 要在 axios 中携带 Bearer Token&#xff0c;可以通过设置 Authorization 请求头…...

编程日记 2023/9/26 9:54:31

leetcode 周赛 364

参考视频&#xff1a; 单调栈【力扣周赛 364】 文章目录 8048. 最大二进制奇数100049. 美丽塔 I100048. 美丽塔 II100047. 统计树中的合法路径数目 8048. 最大二进制奇数 题目链接 给你一个 二进制 字符串 s &#xff0c;其中至少包含一个 1 。 你必须按某种方式 重新排列 字…...

编程日记 2023/9/26 9:50:27

开机自启动Linux and windows

1、背景 服务器由于更新等原因重启&#xff0c;部署到该服务上的响应的应用需要自启动 2、Linux 2.1 方式一 编写启动应用的sh脚本授权该脚本权限 chmod 777 xxx.sh 修改rc.loacl 位置&#xff1a;/etc/rc.local 脚本&#xff1a;sh /home/xxxx.sh & 授权rc.local …...

编程日记 2023/9/26 9:49:26

科技云报道：大模型的阴面：无法忽视的安全隐忧

科技云报道原创。 在AI大模型的身上&#xff0c;竟也出现了“to be or not to be”问题。 争议是伴随着大模型的能力惊艳四座而来的&#xff0c;争议的核心问题在于安全。安全有两个方面&#xff0c;一个是大模型带来的对人类伦理的思考&#xff0c;一个是大模型本身带来的隐…...

编程日记 2023/9/26 9:48:25

2023年前端流行什么技术和框架了？

Web前端三大主流框架有React、Vue.js和Angular&#xff0c;由于接触过Vue.js&#xff0c;接下来主讲最新的Vue3.0&#xff01; Vue3.0作为最新版本的Vue.js框架&#xff0c;拥有更强大的性能和更丰富的功能&#xff0c;为低代码开发平台注入了全新的活力。而JNPF快速开发平台作…...

编程日记 2023/9/26 9:47:24

Nginx 背锅解析漏洞

Nginx 背锅解析漏洞 文章目录 Nginx 背锅解析漏洞1 在线漏洞解读:2 环境搭建3 影响版本&#xff1a;4 漏洞复现4.1 访问页面4.2 上传文件 4.3 上传失败4.4 使用bp进行分析包4.5 对返回图片位置进行访问4.6 执行php代码技巧-图片后缀加./php4.7 分析原因 --》cgi.fix_pathinfo--…...

编程日记 2023/9/26 9:46:23

AI与传统数据库 - ChatGPT风过之后 ｜ 从Duet AI说开来

作者&#xff1a;Ni Demai&#xff0c;是NineData数据库产品专家&#xff0c;曾任阿里云数据库国际产品总负责人&#xff0c;华为高斯 GaussDB 创始团队核心架构师&#xff0c;IBM Db2 资深研发工程师。 Demai 专注 Cloud-Native database 架构设计&#xff0c;分析型 MPP&…...

编程日记 2023/9/26 9:44:21

【技术解析】从点测量到全场感知：DIC三维应变测量如何革新传统应变片测试范式

1. 从点到面的技术革命&#xff1a;为什么我们需要全场应变测量&#xff1f; 记得我第一次接触材料力学测试时&#xff0c;导师让我用传统应变片测量一块铝合金板的拉伸变形。我花了整整三天时间&#xff0c;在试样上贴了二十多个应变片&#xff0c;结果数据还是支离破碎。那时…...

编程新知 2026/5/19 3:00:08

K-Means聚类选K避坑指南：当肘部法则“失灵”，轮廓系数如何救场？

K-Means聚类选K避坑指南&#xff1a;当肘部法则"失灵"&#xff0c;轮廓系数如何救场&#xff1f; 在数据科学实践中&#xff0c;K-Means算法因其简洁高效而广受欢迎&#xff0c;但确定最佳聚类数K却常让从业者陷入困境。当面对高维、噪声多或分布不平衡的真实业务数据…...

编程新知 2026/5/19 2:23:12

别再死磕PSO了！用Python手把手教你实现GWO灰狼优化算法（附完整代码）

用Python实战GWO灰狼优化算法&#xff1a;告别传统优化方法的局限 在工程优化和机器学习领域&#xff0c;算法选择往往决定了问题求解的效率和质量。传统粒子群优化(PSO)算法虽然广为人知&#xff0c;但其参数调节复杂、易陷入局部最优的缺点也日益明显。灰狼优化算法(Grey Wol…...

编程新知 2026/5/19 0:54:37

手把手教你用ADS 2023设计433MHz低噪放大器（附ATF54143模型下载）

手把手教你用ADS 2023设计433MHz低噪放大器&#xff08;附ATF54143模型下载&#xff09; 在射频电路设计中&#xff0c;低噪声放大器&#xff08;LNA&#xff09;是接收机前端的关键部件&#xff0c;其性能直接影响整个系统的灵敏度。433MHz频段广泛应用于物联网、遥控器和工业…...

编程新知 2026/5/18 23:55:19

如何免费解锁雀魂全角色皮肤：终极完整配置指南

如何免费解锁雀魂全角色皮肤&#xff1a;终极完整配置指南 【免费下载链接】majsoul_mod_plus 雀魂解锁全角色、皮肤、装扮等&#xff0c;支持全部服务器。 项目地址: https://gitcode.com/gh_mirrors/ma/majsoul_mod_plus 还在为无法获得心仪的雀魂角色而烦恼吗&#x…...

编程新知 2026/5/18 23:37:33

解锁网盘文件下载新体验：LinkSwift直链解析工具完全指南

解锁网盘文件下载新体验&#xff1a;LinkSwift直链解析工具完全指南 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 &#xff0c;支持 百度网盘 / 阿里云盘 / 中国移动云盘 / 天…...

编程新知 2026/5/18 23:24:41

Awesome-LLM-Apps：大语言模型应用开发实战指南与开源项目宝库

1. 项目概述&#xff1a;一个大型语言模型应用的开源宝库如果你最近在折腾大语言模型&#xff0c;想找点现成的、能跑起来的应用来学习或者直接部署&#xff0c;那你大概率在GitHub上见过这个项目。awesome-llm-apps&#xff0c; 一个由开发者Shubham Saboo维护的仓库&#xff…...

编程新知 2026/5/18 23:03:09

Python网络爬虫框架xcapy实战：任务驱动与反爬对抗

1. 项目概述&#xff1a;一个为现代应用量身定制的网络抓取框架最近在做一个需要大规模、高频率抓取网页数据的项目&#xff0c;传统的爬虫框架用起来总觉得有点“水土不服”。要么是异步处理不够优雅&#xff0c;遇到复杂的反爬策略就手忙脚乱&#xff1b;要么是配置过于繁琐&…...

编程新知 2026/5/18 22:45:56

使用Taotoken后API调用延迟与稳定性体感观察报告

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 使用Taotoken后API调用延迟与稳定性体感观察报告 1. 引言&#xff1a;从直接对接模型到使用聚合平台 在开发基于大语言模型的应用…...

编程新知 2026/5/18 22:41:42

基于HPM5E00与LAN9252的EtherCAT从站开发板全流程实战

1. 项目概述&#xff1a;从零到一&#xff0c;打造专属的 EtherCAT 从站开发板 最近在工业自动化圈子里&#xff0c;EtherCAT 的热度一直居高不下。它那近乎实时的通讯性能、灵活的拓扑结构&#xff0c;让它在运动控制、机器人、高端数控机床等领域成了“香饽饽”。但很多开发者…...

编程新知 2026/5/18 22:28:29