Vue 中组件与组件之间如何通信

Question

说明：
我有两个 .vue 的子组件，第一个组件是显示的，第二个组件是隐藏的( v-if )。

需求：
第一个组件包含一个上传按钮，点击上传按钮用户可以上传图片至服务器。这一步我已经完成，并且在控制台可以成功拿到上传至服务器的图片 url。接下来我要做的是需要让第一个组件消失，让第二个组件显示，并且图片会展示在第二个组件。这里我没有使用 vue-router 。

问题：
我不知道该怎么具体写绑定事件

Answer 1

两个组件共享一个state object 就可以了。从共同的父传递进去 通过事件 触发父组件的改变这个state的值。
或者你使用vuex 就更简单了

Answer 2

1、可以使用vuex，然后做watch或者直接绑定也可以；
2、可以看看Vue.$emit()和Vue.$on().官文：https://vuefe.cn/v2/api/#实例方法-事件

Answer 3

坦白说我觉得这两部分应该是一个组件的内容，而且看你说用到 v-if ，似乎的确也当它是一个组件，或者说是一个大组件的两个子组件。

至于方式，你上传总要发起一个 XHR，那么在成功回调的时候改变 v-if 的值就好。

Answer 4

vue2的话官方赞成使用vuex

提供个参考示例 http://vue.tigerb.cn/

Answer 5

如果业务逻辑是包含在整个父组件中的，那没必要使用 vuex。
在父组件里设置一个 data: imgUrl，在第一个组件中上传完毕以图片地址为参数 emit 一个事件，父组件中 v-on 绑定事件，事件回调函数是接受子组件 emit 事件的参数并赋值给 imgUrl。第二个组件中设置一个 imgUrl prop，在父组件中绑定到 imgUrl 数据即可。

如果 imgUrl 还要用到其他组件中，可以考虑使用 vuex。

Answer 6

vuex吧，通讯量小用Eventbus