最近项目中使用到vue，自己第一次接触这种数据驱动的前端框架，在使用中遇到了一个问题，在这里记下来，希望自己以后不要再犯。也希望可以帮到遇到同样问题的朋友。
vue组件
vue强大的组件系统，对代码的复用和程序的清晰度很有帮助，我们可以将公用的功能抽出来，写成一个vue的组件，以便日后复用，像分页栏、动态导航之类的。
比如所我将列表数据展示和列表的导航分开为两个组件。当我只有一种类型的数据要展示的时候，我就可以直接将列表数据组件拿来用；当我有多种相似的数据类型要展示，这时候就可以结合二者了。
😯我是一张图.png
但是怎么结合呢？我说的相似的数据类型指的是同一种数据格式，但是数据来源不同（语文学的不好，请理解🙈），就像图中的分组1、分组2、分组3，不通的列表导航对应着不同的api地址，当点击导航栏的时候，获取对应的接口地址，请求服务器数据，列表展示数据。
事件总线的使用
约定：以下我们将上图中左边的导航栏组件简称为A组件，右边列表组件简称为B组件。
我是这样使用事件总线的，点击A组件当中的导航项，获取对应的请求地址，在事件总线中请求服务器的数据，然后将更新数据，B组件中监控事件总线中的数据，这样就能实现实时刷新了。这其中遇到了一个问题，纠结了我好久。
最开始的事件总线的代码如下（省略了部分代码）：
// event bus definition
var bus = new Vue({
data: {
apiUrl: '',
navItems: [
{name: 'group 1', url: 'http://xxxxxx'},
{name: 'group 2', url: 'http://bbbbxx'}
],
dataList: []
},
methods: {
getResponseData: function () {
// 请求服务器数据获取到data后
this.dataList = data;
},
changeApiUrl: function (index) {
this.apiUrl = this.navItems[index].url;
this.getResponseData();
}
},
created: function () {
this.$on('getResponseData', this.getResponseData);
this.$on('changeApiUrl', this.changeApiUrl);
},
beforeDestroy: function () {
this.$off('getResponseData', this.getResponseData);
this.$off('changeApiUrl', this.changeApiUrl);
}
});
// 导航组件 A
var navItemComponent = {
data: function () {
return {
navItems: bus.navItems
}
},
methods: {
onItemClick: function (index) {
bus.$emit('changeApiUrl', index);
}
}
};
// 列表组件 B
var tableList = {
data: function () {
return {
dataList: bus.dataList
}
}
};
这种情况页面正常渲染没有问题，但是当我点击不同的导航栏的时候，列表中没有数据显示，查看http响应报文，可以看到响应的数据，为什么不显示呢？
问题出现在下面这两个片段的代码：
//事件总线中
getResponseData: function () {
// 请求服务器数据获取到data后
this.dataList = data;
}
// 列表组件中
data: function () {
return {
dataList: bus.dataList
}
}
这相当于什么呢？下面这个例子很好的说清楚了。
var a = 'hello world';
var b = a;
var c = 'babababa';
var a = c;
// 这种情况下：
console.log(a); // output: babababa
console.log(b); // output: hello world
console.log(c); // output: babababa
那怎么解决呢？请求获取完数据后，不要改变事件总线中dataList的引用对象就好了。
getResponseData: function () {
// 请求服务器数据获取到data后
this.dataList.splice(0,this.dataList.length);
for(var i = 0;i<this.data.length;++i){
this.dataList.push(data[i]);
}
}
这是我想到的解决办法，如果你看了这篇文章，有更好的解决办法的话，能告诉我吗？
