VUE非父子组件间通信

Question

非父子组件间的值变化时的通知，没有事件！，怎么单纯的让一个子组件知道另外一个子组件中的某个值变化

父组件中有两个子组件

list接收父组件传过来的三个值

现在要点击list的某个图片时，detail可以得到img的值

detail 跟 home 的关系是这样的，这个时候怎么让detail知道 点击list时对应的img值并显示

这是home页，有四个list

这是detail，由于不知道怎么获得对应的值，图片没显示出来

Answer 1

复杂的使用vuex。
简单的可以通过event bus。

vuex文档

event bus demo

Answer 2

1. vuex里面定义一个currentImagestate，再定义一个changeCurrentImagemutation用于改变currentImage

2. 在List.vue的click事件中调用$store.commit('changeCurrentImage', item.src)来设置vuex里的全局currentImage

3. 在Detail.vue中用<img :src="$store.state.currentImage" >来显示。

具体实现参考vuex的官方文档