组件间参数传递问题？

来源：17-8 better-scroll运用（3）

weibo_Gingbery_0

2017-05-24

我将menu部分和foods部分拆分为了两个组件，如何将foods组件computed的currentIndex参数传递给menu组件？是涉及到vue中的非父子组件通讯吗？我已经阅读了相关文档，但是还是不太明白

写回答

2回答

weibo_Gingbery_0

提问者

2017-05-25

自己鼓捣了半天,终于搞出来了,对于并不复杂的非父子间通讯,没必要引入vuex,可以使用bus中间件.官方文档的介绍比较简略,对于采用vue-cli搭建本课程项目,方法如下:

新建一个bus.js文件:
import Vue from 'vue';
export default new Vue();
在content.vue中触发事件,因为要在每次滚动后触发事件,所以代码写在滚动代码this.scrollY=Math.abs(Math.round(pos.y));的后面,代码如下:

bus.$emit('currentIndex',this.currentIndex);
在menu.vue中感知事件,代码写在mounted属性中:

mounted:function () {
var self=this;
bus.$on("currentIndex",function (data) {
console.log(data);
self.currentIndex=data;
});
},