Vue2进阶——组件通信

文章目录

  • 一、props配置项
  • 二、组件自定义事件
  • 三、全局事件总线
  • 四、消息订阅与发布

一、props配置项

  • 作用:组件间通信
  • 传递数据
<Demo name="xxx"/>
  • 接收数据
1. 只接收
props:['name']
2. 限制类型
props:{name:string
}
3.限制类型,必要性,指定默认值
props:{name:{type:string,  //类型required:true,  //必要性default:'老王'   //默认值}
}
3. 

备注:props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若业务需求确实需要修改,那么请复制props的内容到data中一份,然后去修改data中的数据。(因此v-model绑定的值不能是props传过来的值,因为props是不能修改的)

  • 拓展:这种方式一般是父传子,要实现子传父,可以在father.vue中定义一个函数,然后通过儿子通过props接收,在适当的时机调用这个函数,将自己的参数传给这个函数,然后父亲就可以接收了。

二、组件自定义事件

  • 通过父组件给子组件绑定一个自定义事件实现子给父传递数据
  • 使用场景:A是父组件,B是子组件,B想给A传递数据,那么就要在A中给B绑定自定义事件(事件回调在A中)
  • 绑定自定义事件
在子组件Demo中,若xxx被触发了,则父组件的test事件就会被调用
1.在父组件中
<Demo @xxx="test"/><Demo v-on:xxx="test"/>
2.在父组件中
<Demo ref="demo"/>
....
mounted(){this.$refs.组件名.$on(xxx,this.test)
}
3.若想让自定义事件只触发一次,可以使用once修饰符,或$once方法
  • 触发自定义事件
this.$emit(xxx,数据)
  • 解绑自定义事件
1.this.$off(xxx)
2.this.$off([xxx1,xxx2,xx3])解绑多个
3.this.$off()   解绑全部
  • 组件上也可以绑定原生DOM事件,需要使用native修饰符,不然会认为是自定义事件。
<Demo @click.naitve="test"/>
  • 注意,通过this.$refs.组件名.$on(xxx,this.test)绑定自定义事件时,回调test要么配置在methods中,要么用箭头函数,否则会出现this指向问题。

三、全局事件总线

  • 作用:实现任意组件通信
  • 安装全局事件总线
//在main.js中
new Vue({...beforeCreate(){Vue.prototype.$bus = this    //安装全局事件总线,$bus就是当前应用的vm}...
})
  • 使用全局事件总线
1. 接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身
methods(){demo(data){...}
}
mounted(){this.$bus.$on('xxx',this.demo)
}
2.提供数据
this.$bus.$emit('xxx',数据)
  • 最好在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件。

四、消息订阅与发布

  • 作用:实现任意组件通信。
  • 使用:利用第三方库,安装pubsub:npm o pubsub-js
  • 引入
import pubsub from 'pubsub-js'
  • 接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身。
methods(){demo(data){...}
}
mounted(){this.pid = pubsub.subscribe('xxx',this.demo)//或者this.pid = pubsub.subscribe('xxx',(data)=>{})
}
  • 提供数据
pubsub.publish('xxx',数据)
  • 最好在beforeDestroy钩子中,用Pubsub.unsubscribe(pid)去取消订阅

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/773250.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Salesforce宣布将停用Workflow Rules和Process Builder!

在近期的公告中&#xff0c;Salesforce透露在2025年12月31日之后将不再支持Workflow Rules和Process Builder。 Salesforce敦促用户在截止日期前将其自动化流程迁移到Flow Builder&#xff0c;以确保不间断的支持和漏洞修复。此举正值Salesforce将重点转向更现代、可扩展、低代…

rust中常用cfg属性和cfg!宏的使用说明,实现不同系统的条件编译

cfg有两种使用方式&#xff0c;一种是属性&#xff1a; #[cfg()]&#xff0c;一种是宏&#xff1a;cfg! &#xff0c;这两个都是非常常用的功能。 #[cfg()]是 Rust 中的一个属性 用于根据配置条件来选择性地包含或排除代码。cfg 是 "configuration" 的缩写&#xf…

Web举例:防火墙二层,上下行连接交换机的主备备份组网

Web举例&#xff1a;防火墙二层&#xff0c;上下行连接交换机的主备备份组网 介绍了业务接口工作在二层&#xff0c;上下行连接交换机的主备备份组网的Web举例。 组网需求 如图1所示&#xff0c;两台FW的业务接口都工作在二层&#xff0c;上下行分别连接交换机。FW的上下行业…

修改android11的默认桌面

要修改 Android 11 的默认桌面&#xff0c;通常需要使用第三方的启动器&#xff08;Launcher&#xff09;应用程序来替换系统默认的启动器。以下是一般步骤&#xff1a; 下载第三方启动器应用&#xff1a; 在 Google Play 商店或其他应用商店中搜索并下载你喜欢的第三方启动器应…

云服务器配置 docker-spark

云服务器配置 docker-spark 1. 安装2. 启动3. 查看4. 验证5. 其他 1. 安装 我的服务器是腾讯云轻量应用服务器&#xff0c;2 核 2 G&#xff0c;已经内置了 docker&#xff0c; 配置大概如下&#xff1a; ubuntuVM-20-5-ubuntu --------------------- OS: Ubuntu 22.04 LTS x…

中小型集群部署,Docker Swarm(集群)使用及部署应用介绍

1、Docker Swarm简介 说到集群&#xff0c;第一个想到的就是k8s&#xff0c;但docker官方也提供了集群和编排解决方案&#xff0c;它允许你将多个 Docker 主机连接在一起&#xff0c;形成一个“群集”&#xff08;Swarm&#xff09;&#xff0c;并可以在这个 Swarm 上运行和管…

企业安全建设与安全架构实践资料合集(附下载)

企业安全建设与安全架构实践资料合集&#xff0c;供大家参考学习。 知识星球下载&#xff1a;https://t.zsxq.com/18Kq8s0ov 一、企业安全建设与最佳实践 云时代企业安全建设.pdf 云安全服务管理指南.pdf 企业信息安全建设策略与实践.pdf 企业网络安全设计方案.pdf 企业安全建…

pytest和unittest 如何选择?

目录 如何选择?pytest和unittest哪个更强大pytest和unittest是否可同时应用如何选择? pytest和unittest都是Python中常用的测试框架,它们各自具有一些特点和优势,选择哪一个取决于你的具体需求和偏好。以下是一些关于这两个框架的对比和选择建议: 易用性和简洁性: pytes…

Go语言学习Day4:函数(上)

名人说&#xff1a;莫愁千里路&#xff0c;自有到来风。 ——钱珝 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 目录 1、函数的概念与定义①函数的概念②函数的具体定义③多返回值 2、函数参数与作用域①可变参数②形…

【零基础C语言】文件操作

目录 理解文件操作 什么是文件 程序文件 数据文件 文件名字 二进制文件和文本文件 文件的打开和关闭 文件的打开和关闭操作 实验1&#xff0c;打开一个文件并且输入26个字母 打开读取文件text.txt ,并且将它拷贝进text_cpy.txt 使用 fputs 和 fgets 函数 使用 fprintf函…

设计模式|发布-订阅模式(Publish-Subscribe Pattern)

文章目录 初识发布-订阅模式发布-订阅模式的关键概念发布订阅模式的优缺点示例代码&#xff08;使用 Java 实现&#xff09;有哪些知名框架使用了发布-订阅模式常见面试题 初识发布-订阅模式 发布-订阅模式&#xff08;Publish-Subscribe Pattern&#xff09;是一种软件架构设…

【python】(14)理解Python中的pypinyin库

系列文章回顾 【python】(01)初识装饰器Decorator 【python】(02)初识迭代器Iterator 【python】(03)初识生成器Generator 【python】(04)python中实现多任务并发和并行的区别 【python】(05)如何使用python中的logging模块记录日志信息 【python】(06)理解Python中的 lambda 、…

【计算机网络】IP 协议

网络层IP协议 一、认识 IP 地址二、IP 协议报头格式三、网段划分1. 初识子网划分2. 理解子网划分3. 子网掩码4. 特殊的 IP 地址5. IP 地址的数量限制6. 私有 IP 地址和公网 IP 地址7. 理解全球网络&#xff08;1&#xff09;理解公网&#xff08;2&#xff09;理解私网&#xf…

华为汽车图谱

极狐 极狐&#xff08;ARCFOX&#xff09;是由北汽、华为、戴姆勒、麦格纳等联合打造。总部位于北京蓝谷。 问界 华为与赛力斯&#xff08;东风小康&#xff09;合作的成果。 阿维塔 阿维塔&#xff08;AVATR&#xff09;是由长安汽车、华为、宁德时代三方联合打造。公司总部位…

51单片机超声波测距代码

超声波测距代码&#xff1a; #include<reg52.h>sbit echoP2^0 ; //回声接收端口 sbit trigP2^1 ;//超声波触发端口sbit wei1P2^4; sbit wei2P2^5; sbit wei3P2^6; sbit wei4P2^7;sbit inP2^2;#define dula P0 #define uchar unsigned char #define uint unsigned intlo…

代码随想录Day58:每日温度、下一个更大元素 I

每日温度 class Solution { public:vector<int> dailyTemperatures(vector<int>& temperatures) {stack<int> st;vector<int> result(temperatures.size(), 0);for(int i 0; i < temperatures.size(); i){while(!st.empty() && tempe…

数字化接口、网络身份证实名认证接口、C#实名认证接口说明示例

身份证实名认证接口是现代应用程序中的越来越重要的一部分&#xff0c;通过身份证识别接口来实现身份信息的提取与录入&#xff0c;实名认证接口通过核验身份证二要素、三要素的方式实时联网进行身份信息的真伪核验。 网民在进行网络活动时&#xff0c;均需要用户提供真实身份…

软考高级:常见中间件分类和例题

作者&#xff1a;明明如月学长&#xff0c; CSDN 博客专家&#xff0c;大厂高级 Java 工程师&#xff0c;《性能优化方法论》作者、《解锁大厂思维&#xff1a;剖析《阿里巴巴Java开发手册》》、《再学经典&#xff1a;《Effective Java》独家解析》专栏作者。 热门文章推荐&am…

canal: 连接kafka (docker)

一、确保mysql binlog开启并使用ROW作为日志格式 docker 启动mysql 5.7配置文件 my.cnf [mysqld] log-binmysql-bin # 开启 binlog binlog-formatROW # 选择 ROW 模式 server-id1一定要确保上述两个值一个为ROW&#xff0c;一个为ON 二、下载canal的run.sh https://github.c…

一周学会Django5 Python Web开发-Django5模型定义

锋哥原创的Python Web开发 Django5视频教程&#xff1a; 2024版 Django5 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili2024版 Django5 Python web开发 视频教程(无废话版) 玩命更新中~共计41条视频&#xff0c;包括&#xff1a;2024版 Django5 Python we…