全局事件的简单使用(vue-cli)

使用流程：

1.先在main.js中创建总线（中间者）

new Vue({
  render: h => h(App),
  beforeCreate() { Vue.prototype.$bus = this }
}).$mount('#app')
//$bus(可以任意命名)

2.接收数据的组件：


methods:{
getson(data){      
          this.newObj=data;
          this.showList.unshift(this.newObj);         
        },

}//自定义方法

mounted()
        {
        this.$bus.$on('submit',(data)=>{this.getson(data)});
        this.$bus.$on('quit',this.quit)
        },
//销毁       beforeDestroy() {
          this.$bus.$off('submit')
          this.$bus.$off('quit')},

在mounted（）{}中定义事件

数据更新就会触发该生命钩子函数）

this.$可以任取的名字.$on('标识名',(数据data)=>{this.getson(data)});

使用箭头函数直接执行事件或者调用事件

3.发送数据的组件：

methodes:{
submit1() {
  var d =new Date();  
  var obj = {  
          cityNum: this.input1,
          city:this.input2,
          jingdu:this.jingdu,
          weidu:this.weidu,
          time:d.getFullYear()+'-0'+d.getMonth()+'-'+d.getDate()+' '+d.getHours()+'-'+d.getMinutes()+':'+d.getSeconds(),
          };  //这是个对象
 this.$bus.$emit('submit',obj);  
 this.$bus.$emit('quit','')           
// 调用方法数据可以为空
},
}

在methodes中的方法中调用中间者($bus)

this.$bus.$emit('标识名',数据); 数据可以是对象和其他任意类型