目前在项目中有这么两个平行的vue.js组件, 都挂载在$el:document.body
下:hall
和detail
现在的情况是, detail
中的某个值改变了, 需要在hall
中的某个值也作出相应的改变。 本来是想做父子组件的, 但项目框架如此, 改还要牵扯到很多, 暂缓了。
我们知道vue.js中组件树的通信是比较方便的: 子组件可以通过v-bind
和prop
来从父组件继承值并双向绑定, 而子组件也可以通过$dispatch
方法来向父组件发送信息
那么这种平行的子组件之间, 有没有什么好的通信方法呢?
现在的临时解决方案就是:收到ajax的返回信息之后, 在回调函数中这样写:
this.$parent.$children[0].$data.somedata = somavalue
但这样的写法让我很不安, 且不说那个强耦合$children[0]
, 实现也不甚优雅
有没有什么好的办法呢?求解!
更加令人蛋伤的是项目用的是0.12版本+browserify进行组件打包, 1.0的高级特性不敢乱用……
如果通过props来解决的话,可以在两个平行子组件的共同父组件中设定一个data用于储存你要传递的数据,然后两个子组件都通过props连接父组件的这个data,实现一个三方同步。
如果通过$dispatch和$broadcast来解决的话,可以dispatch到根组件,然后在broadcast到子组件。
还可以通过vuex来解决,处处数据同步,处处可取。