全局事件的简单使用(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('标识名',数据); 数据可以是对象和其他任意类型