Vue全局事件总线

 关于事件总线

全局事件总线：

    1）是为了 实现vue组件之间的通信

    2）所有的 组件都能看到管理全局事件的对象

    3）由于每一个组件都能通过原型链找到Vue.prototype，所以 管理全局事件的对象就放在Vue.prototype上

    4）一般用 $bus 属性作为全局事件管理者

Vue原型对象上包含事件处理的方法

1）$on ( eventName , listener ) ：

                      绑定自定义事件监听

2）$emit ( eventName , data )：

                      触发eventName事件

3）$off ( eventName )：

                      解除事件与外部事件函数的绑定关系

4）$once ( eventName , listener )：

                      绑定事件监听，但是只能处理一次

全局事件的使用

1）在main.js中指定事件总线对象

 在Vue创建之前执行 Vue.prototype.$bus=this ，实际上this可以用任意一个对象替换，自己new一个都可以，如：

//main.js 入口文件
import Vue from "vue";
import App from "./App.vue"

new Vue({
  el:'#app',
  render:h=>h(App),
  beforeCreate() {
    //指定全局事件管理者
    Vue.prototype.$bus=this
  }
})

2）组件绑定事件

在组件挂载完毕之后调用 this.$bus.​$on('事件名',监听函数) 给组件绑定事件,如：

<template>
  <div>
    <h2>
      学校：{{name}}<br/>
      地址：{{address}}<br/>

    </h2>
  </div>
</template>

<script>
export default {
  data(){
    return {
      name:'麻省理工大学',
      address:'xxx'
    }
  },methods:{
    enterSchool(student){
      console.log(student.name+"进入了学校")
    }
  },mounted() {
    //将事件绑定全局事件总线
    this.$bus.$on('enterSchool',this.enterSchool)
  }
}
</script>

3）触发组件事件

通过屌用组件 this.$bus.$emit('事件名',数据) 触发另一个组件的事件，并传递数据，如：

<template>
  <div>
    <h2>
      学生姓名：{{name}}<br>
      <button @click="enterSchool">进入学校</button>
    </h2>
  </div>
</template>

<script>
export default {
  data(){
    return {
      name:'张三',
    }
  },
  methods:{
    enterSchool(){
      //触发School标签的事件
      this.$bus.$emit('enterSchool',this)
    }
  }
}

总结

1）在main.js中创建vue实例之前通过 Vue.prototype.$bus=this 指定全局事件管理者

 

2）在组件挂载时通过 this.$bus.$on('事件名',监听函数) 绑定事件

3）通过另一个组件的 this.$bus.$emit('事件名',数据) 来触发该组件的事件，并为其传输数据,实现组件间通信

原文地址：https://blog.csdn.net/weixin_74261199/article/details/143503509

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！