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…

    原文作者:小被子
    原文地址: https://segmentfault.com/a/1190000010573137
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞