Vue 组件通信的几种方式

vue通信方式简介

在Vue.js中,组件间通信可以通过props、$emit、事件总线、Vuex以及Provide/Inject等方式来实现,总的来说,组件通信是现代前端开发中不可或缺的一部分,它可以帮助开发者构建更加模块化、可维护和可扩展的应用。

  1. Props / $emit:

    • Props:通过props属性将数据从父组件传递给子组件。
    • $emit:在子组件中通过$emit方法触发自定义事件,父组件可以监听这些事件来接收子组件传递的数据。
  2. 事件总线(Event Bus):

    • 创建一个空的Vue实例作为事件总线,在需要通信的组件中都可以通过该实例进行事件的触发和监听。
    • 可以使用$on方法监听事件,使用$emit方法触发事件。
  3. Vuex复杂的单页应用数据管理

    • Vuex是Vue.js的官方状态管理工具,适用于大型应用中组件间的状态共享和通信。
    • 它通过一个全局的store来管理应用的状态,并提供了一系列的API来实现状态的读取、修改和监听。
  4. Provide / Inject

    • 父组件通过provide选项提供数据,子组件通过inject选项来注入这些数据。
    • 这种方式可以实现跨层级组件间的通信,但要注意不要滥用,以免造成组件间的耦合度过高。

以上具体使用哪种方式取决于你的项目需求和组件之间的关系。对于简单的通信,可以使用props / $emit;对于较复杂的状态管理和多组件之间的通信,可以考虑使用Vuex;对于跨层级的通信或者跨多个组件的通信,可以考虑使用Provide / Inject或事件总线。 

一、props

方法一:props

使用props,父组件可以使用props向子组件传递数据。

父组件vue模板father.vue

<template><child :msg="message"></child>
</template><script>import child from './child.vue';export default {components: {child},data () {return {message: 'father message';}}
}
</script>

子组件vue模板child.vue 

<template><div>{{msg}}</div>
</template><script>
export default {props: {msg: {type: String,required: true}}
}
</script>

方法二 使用$children 【使用$children可以在父组件中访问子组件。】

二、子组件向父组件通信 

 方法一:使用vue事件

父组件向子组件传递事件方法,子组件通过$emit触发事件,回调给父组件。

父组件vue模板father.vue

<template><child @msgFunc="func"></child>
</template><script>import child from './child.vue';export default {components: {child},methods: {func (msg) {console.log(msg);}}
}
</script>

子组件vue模板child.vue 

<template><button @click="handleClick">点我</button>
</template><script>
export default {props: {msg: {type: String,required: true}},methods () {handleClick () {//........this.$emit('msgFunc');}}
}
</script>

方法二: 通过修改父组件传递的props来修改父组件数据 

这种方法只能在父组件传递一个引用变量时可以使用,字面变量无法达到相应效果。因为饮用变量最终无论是父组件中的数据还是子组件得到的props中的数据都是指向同一块内存地址,所以修改了子组件中props的数据即修改了父组件的数据。【不建议】 

方法三:使用$parent使用--->$parent可以访问父组件的数据。

 三、非父子组件、兄弟组件之间的数据传递

非父子组件通信,Vue官方推荐使用一个Vue实例作为中央事件总线。

Vue内部有一个事件机制,可以参考源码。

$on方法用来监听一个事件。

$emit用来触发一个事件。

/*新建一个Vue实例作为中央事件总嫌*/
let event = new Vue();/*监听事件*/
event.$on('eventName', (val) => {//......do something
});/*触发事件*/
event.$emit('eventName', 'this is a message.');

四、多层级父子组件通信: 

在Vue1.0中实现了$broadcast与$dispatch两个方法用来向子组件(或父组件)广播(或派发),当子组件(或父组件)上监听了事件并返回true的时候会向爷孙级组件继续广播(或派发)事件。但是这个方法在Vue2.0里面已经被移除了。

其实这两个方法内部实现还是用到的还是$parent以及$children,用以遍历子节点或是逐级向上查询父节点,访问到指定组件名的时候,调用$emit触发指定事件。 

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

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

相关文章

2024年4月18号技术面试总结

1.什么是微服务雪崩?微服务雪崩的解决方案? 微服务调用链路中的某个服务故障,引起整个链路中的所有微服务都不可用,这就是雪崩。服务A依赖于服务B,服务A依赖于服务D。现在假设,服务D出现了故障! 它访问这个服务D就必然要等待服务D的结果,那因为服务D出现了故障,那必然不…

String str=“hello“与String str = new String(“hello“)的区别

常量池&#xff08;constant pool&#xff09;指的是在编译期被确定&#xff0c;并被保存在以编译的.class文件中的一些数据。它包括了关于类、方法、接口等中的常量&#xff0c;也包括字符串常量。 实际上 String str new String("hellow");创建了两个对象&#xf…

Java语言中字符串处理最常见的操作以及注意事项

0. 前言 由于最近线上连续出现跟字符串处理相关的故障&#xff0c;实属不应该。也从这些故障中看到大家对常见的字符串处理API有一些淡忘&#xff0c;希望通过收集整体并总结常见的处理方法&#xff0c;大家温故而知新。 1. 创建和初始化&#xff1a; a. 使用双引号直接创建…

方程豹春季品牌发布会:全家族矩阵献礼比亚迪

春意盎然的四月&#xff0c;深圳也迎来了中国新能源汽车领域的一场盛事。 4月16日&#xff0c;作为比亚迪旗下全球首个专业个性化汽车品牌&#xff0c;方程豹在深圳隆重举办春季发布会。 在这场以“方华”为主题的发布会上&#xff0c;方程豹汽车全家族矩阵首次集体亮相&#x…

【数据结构】单链表经典算法题的巧妙解题思路

目录 题目 1.移除链表元素 2.反转链表 3.链表的中间节点 4.合并两个有序链表 5.环形链表的约瑟夫问题 解析 题目1&#xff1a;创建新链表 题目2&#xff1a;巧用三个指针 题目3&#xff1a;快慢指针 题目4&#xff1a;哨兵位节点 题目5&#xff1a;环形链表 介绍完了…

美化博客文章(持续更新)

&#x1f381;个人主页&#xff1a;我们的五年 &#x1f50d;系列专栏&#xff1a;游戏实现&#xff1a;贪吃蛇​​​​​​ &#x1f337;追光的人&#xff0c;终会万丈光芒 前言&#xff1a; 该文提供我的一些文章设计的一些方法 目录 1.应用超链接 1.应用超链接

IIL IIH

IIH test_no;DATALOG_MSG;TEST_NO(test_no);RELAY_ON PDCL资源FORCE_V_MLDPS给VCC上电5.5vPIN_MODE位leakage_PINS管脚组接地LEVELS(Vcc5d5_lvl,2mS); PIN_INC(leakage_PINS, LOOP_BY_PIN) { RELAY_OFF PDCL资源 RELAY_ON PPMU资源 FORCE_V_PPMU上电5.5v&#xff0c;电流量…

mysql in查询优化

都说in查询比较慢&#xff0c;要改成子查询模式&#xff0c;ChatGPT大模型告诉了我&#xff0c;SQL中替换In查询的10种方法&#xff0c;太赞了&#xff0c;按照这个说的集中方法&#xff0c;验证一下。因为实际项目中确实存在in很多的情况。 查询执行的先后顺序对优化有必要&am…

【EI会议征稿】2024年先进机械电子、电气工程与自动化国际学术会议(ICAMEEA 2024)

2024 International Conference on Advanced Mechatronic, Electrical Engineering and Automation ●会议简介 2024年先进机械电子、电气工程与自动化国际学术会议&#xff08;ICAMEEA 2024&#xff09;将汇聚全球机械电子、电气工程与自动化领域的专家学者&#xff0c;共同…

【软考】敏捷方法

目录 一、概念二、敏捷方法2.1 极限编程(XP)2.2 水晶法(Crystal)2.2.1 说明2.2.1 特征 2.3 并列争球法(Scrum)2.4 自适应软件开发(ASD)2.5 敏捷统一过程(AUP)2.5.1 说明2.5.2 执行的活动 一、概念 1.Agile Development。 2.敏捷开发的总体目标是通过“尽可能早地、持续地对有价…

计算机网络:CSMA/CA协议

计算机网络&#xff1a;CSMA/CA协议 CSMA/CA概述帧间间隔工作原理退避算法虚拟载波监听 CSMA/CA概述 讲解CSMA/CA之前&#xff0c;我们回顾一下CSMA/CD的三个特性&#xff1a; 多址接入MA&#xff1a;多个主机连接在一条总线上&#xff0c;竞争使用总线 载波监听CS&#xff1a…

web网站搭建实验

综合练习&#xff1a;请给openlab搭建web网站 网站需求&#xff1a; 1.基于域名www.openlab.com可以访问网站内容为 welcome to openlab!!! 2.给该公司创建三个子界面分别显示学生信息&#xff0c;教学资料 和缴费网站&#xff0c;基于&#xff0c;www.openlab.com/data网站…

麦克斯韦方程简单理解波粒二象性粒子退相干(Quantum Decoherence):微观的动态,宏观的静态量子

目录 麦克斯韦方程简单理解 波粒二象性 粒子退相干(Quantum Decoherence):微观的动态,宏观的静

X-314智能合约:金融创新的强大引擎

&#x1f4a5;火爆到烫手的X-314智能合约&#x1f525; X-314智能合约是基于以太坊区块链开发的&#xff0c;具有高度可定制性和灵活性。 ave开单独板块&#xff1b;详细资料已经准备好&#xff1b;对web3感兴趣的大佬货&#xff1b;多交流多指导&#x1f91d; ​X-314智能合…

JUC(java.util.concurrent) 的常见类

Callable 接口 Callable 的用法 Callable 是一个 interface&#xff08;类似之前的 Runnable&#xff0c;用来描述一个任务&#xff0c;但是没有返回值&#xff09;也是描述一个任务的&#xff0c;有返回值。方便程序猿借助多线程的方式计算结果. 例如&#xff1a;创建线程…

Zynq7000系列中PL时钟使用

可编程逻辑&#xff08;PL&#xff09;具有自己的时钟管理生成和分配功能&#xff0c;并从处理器系统&#xff08;PS&#xff09;中的时钟发生器接收四个时钟信号&#xff08;如图25-10所示&#xff09;。 在嵌入式系统中&#xff0c;PL时钟的管理和分配对于确保逻辑电路的正确…

QT跨平台读写Excel

QT跨平台读写Excel 背景Excel工具CMakeLists.txt工程目录 背景 开发框架QT&#xff0c;makefile构建工具CMake&#xff0c;编译器MinGW Excel工具 考虑跨平台则不能使用针对微软COM组件的QAxObject来读写Excel&#xff0c;因此使用开源QtXlsx。 这里是将QXlsx当做源码嵌入使…

使用FastDDS编译IDL文件

1.安装FastDDS环境 Ubuntu22.04 1.1安装依赖的软件 sudo apt-get update //基础工具安装 sudo apt install cmake g python3-pip wget git //Asio 是一个用于网络和低级 I/O 编程的跨平台C库&#xff0c;它提供了一致的 异步模型。 TinyXML2是一个简单&#xff0c;小巧&…

Redis进阶——GEO地理坐标附近商户案例

目录 GEO数据结构的基本用法GEO概述GEO命令的使用GEO数据结构练习 导入店铺数据到GEO业务场景实现代码如下 实现附近商户功能 GEO数据结构的基本用法 GEO概述 GEO就是Geolocation的简写形式&#xff0c;代表地理坐标。Redis在3.2版本中加入了对GEO的支持&#xff0c;允许存储…

java知识点---输入输出

Java 中的输入输出&#xff08;I/O&#xff09;是程序与外部世界&#xff08;如用户、文件、网络、设备等&#xff09;进行数据交换的基础功能。Java 提供了丰富的 I/O API 来支持各种类型的输入输出操作。以下是对 Java 中输入输出的主要概念、API 及使用场景的概述&#xff1…