首页 / VUE / Vue如何实现组件间通信？

Vue如何实现组件间通信？

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Vue如何实现组件间通信？，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含498字，纯文字阅读大概需要1分钟。

内容图文

一、子父间通信（props/$emit）

①父组件向子组件传参（props）

    父组件：

技术分享图片

 

 

 子组件：

技术分享图片

 

 总结：父组件通过props给子组件传递数据。

 

②子组件给父组件传递值（$emit）

子组件：

技术分享图片

 

 

父组件：

技术分享图片

 总结：儿子组件向父组件传递数据的方式就是通过子组件内 $emit 触发自定义事件，子组件使用时 v-on 绑定监听自定义事件。

 

二、任意组件之间通信（$emit 、$son）

EventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接受事件，项目比较小时，用这个比较合适；

实现方式：

event.$emit(eventName,[...args]);

event.$son(eventName,callback)

            event.$emit(事件名，数据)；
event.$son(事件名，data=>{})

main.js

挂载到vue原型上

 技术分享图片

 

 

技术分享图片

 

 技术分享图片

 

 技术分享图片

 

 

三、Vuex

创建一个数据仓库，整个项目全局都可以往这个仓库存放数据和读取数据。适合大项目中。

 

原文：https://www.cnblogs.com/babilong/p/13534469.html

内容总结

以上是互联网集市为您收集整理的Vue如何实现组件间通信？全部内容，希望文章能够帮你解决Vue如何实现组件间通信？所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1215672.html

来源：【匿名】