脚本宝典收集整理的这篇文章主要介绍了Vue组件间的通信，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

https://segmentfault.com/a/11...
https://segmentfault.com/a/11...
父子组件之间的通信参考了第一位同学的文章，在他的基础上完善了每种情况的事例
非父子组件通信的event bus参考了第二位同学的事例

1、父子组件之间的通信
a 父 -> 子 （父组件传递数据给子组件）
使用props https://jsfiddle.net/Irene_Ta...点击预览

b 子 -> 父 （在父组件上调用子组件内定义的方法）
使用ref https://jsfiddle.net/Irene_Ta...点击预览

c 子 -> 父 （父组件获取子组件内的数据）
使用ref https://jsfiddle.net/Irene_Ta...点击预览

d 子 -> 父 （子组件内触发事件，父组件监听事件）
使用$emit https://jsfiddle.net/Irene_Ta...点击预览
<child ref="child" @dialog-confirm="getSelected"></child>
可以把<child>看成是一个普通的HTML元素，注册了dialog-confirm事件，事件响应函数是getSelected

e 父 -> 子 （子组件中获取父组件的数据）
使用$parent https://jsfiddle.net/Irene_Ta...点击预览

2、非父子组件间的通信
a event-bus https://jsfiddle.net/Irene_Ta...点击预览
b vuex https://jsfiddle.net/Irene_Ta...点击预览

脚本宝典总结

以上是脚本宝典为你收集整理的Vue组件间的通信全部内容，希望文章能够帮你解决Vue组件间的通信所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。