1. $on ,和 $off 和 $emit 这三个方法在Vue原型对象上，所以，我们的全局事件总线就要放在Vue的原型对象（vue.prototype）上，以确保每个组件都能访问得到。
代码
第一步：挂载 main.js
//引入Vue import Vue from 'vue' //引入App import App from './App.vue' //关闭Vue的生产提示 Vue.config.productionTip = false //创建vm new Vue({ el:'#app', render: h => h(App), // beforeCreate中模板未解析，且this是vm beforeCreate(){ Vue.prototype.$bus = this //安装全局事件总线 } })
第二步：A 组件发送事件和值
<template> <div> <h2>姓名：{{name}}</h2> <h2>年龄：{{age}}</h2> <button @click="sendName">传递数据</button> </div> </template> <script> export default { name:'TestA', data(){ return{ name:'张三', age:18 } }, methods:{ // 触发事件,事件名不能重复 sendName(){ this.$bus.$emit('methodFun', this.name); } }, } </script> <style scoped> </style>
第三步：B组件接收A组件的事件和值
<template> <div> <h2>籍贯：{{native}}</h2> <h2>住址：{{adress}}</h2> </div> </template> <script> export default { name:'TestB', data(){ return{ native:'河北', adress:'河北邯郸', } }, mounted(){ // 绑定事件 this.$bus.$on('methodFun', (data)=>{ console.log('数据', data); }) }, // 销毁对应自定义事件 在得到数据之后，解绑事件，提高性能 beforeDestroy(){ this.$bus.$off('methodFun') } } </script> <style scoped> </style>
