发表于： 2020-02-12 23:03:31

今天完成的事情

今天是学习了bus总线控制在脚手架中的基本用法。使用bus进行传值是基于两个组件之间的关系是非父子组件的关系，从而传值需要用到bus的控制。

EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的灾难，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。

通常的使用方法，我们首先需要安装bus，在终端输入命令

<code npm install vue-bus

新建一个bus的封装js文件

import Vue from 'vue';
const bus = new Vue();
export default bus;

给bus新建一个实例。之后的用法会使用调用bus.js这个文件中的bus。在app.vue中引入

import bus from '../bus'

在我们另一个组件中同样引入

import bus from '../../bus'

两者的相对路径并不相同。而后是使用的方法，在对bus使用时要了解一个是发送数据的内容，一个是监听数据的内容。

   .then(response => {
                // 请求成功
                let res = response.data;
                console.log(res);
                this.getres=res;
                bus.$emit('change',this.getres);

在app.vue中我使用$emit来传输我们的res内容，而在我们的about.vue中就用$on来接受这个数据

  created(){     
       let _this=this;
                bus.$on('change',function(msg){ 
                    _this.getlist=msg.data.articleList[0].createAt
                    console.log(_this.getlist)
                    
                })
            console.log(_this.getlist)
            }

在这个页面中，我是用了生命周期函数created表示在页面创建存在时就将这个数值传入到我们的data中去。从而插值表达式渲染出这个数据项时能够得到axios的数据。在这个地方遇到了一个坑点，就是this的作用域的问题，在bus中的this指向不是对于这个vue文件的，所以要在外面先引用一下vue中的this。在我们的使用参数过程中生命周期函数是一个很好的媒介做为我们的存取动作。