全局事件总线

1.一种组件间通信方式，适用于任意组件间通信
2.安装全局事件总线
new Vue({
...
beforeCreate () {
Vue.prototype.bus 绑定自定义事件，事件的回调留在 A 组件自身
methods: {
sendStudentName() {
demo(data){...}
}
...
mounted() {
this.on('xxx', (data) => {
this.emit('xxx', this.demo)
})
},
(2)提供数据：this.emit('xxxxx', this.demo)
4.最好在 beforeDestroy 钩子中，用$off 去解绑当前组件所用到的事件

a20efc47cb298396e24d2bd81d63061.png

使用方法

在main.js中绑定全局事件总线

beforeCreate () {
    Vue.prototype.$bus  =  this //安装全局事件总线
  }

发送：

 this.$bus.$emit('hello', this.name)

接收：

this.$bus.$on('hello', (data) => {
      console.log('我是school组件，收到数据了', data)
    })

销毁

 this.$bus.$off('hello')

main.js

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
  beforeCreate () {
    Vue.prototype.$bus  =  this //安装全局事件总线
  }
}).$mount('#app')

App.vue

<template>
  <div class="app">
    <h1>{{ msg }}</h1>
    <School />
    <Student />
  </div>
</template>

<script>
// 引入组件
import School from './components/School.vue'
import Student from './components/Student.vue'

export default {
  name: 'App',
  components: {
    School,
    Student,
  },
  data() {
    return {
      msg: '你好啊',
    }
  },
}
</script>

<style scoped>
.app {
  background-color: gray;
  padding: 5px;
}
</style>

School.vue

<template>
  <!-- 组件的结构 -->
  <div class="school">
    <h2>学校名称:{{ name }}</h2>
    <h2>学校地址:{{ address }}</h2>
  </div>
</template>

<script>
export default {
  name: 'School',
  data() {
    return {
      name: '清华大学',
      address: '北京',
    }
  },
  mounted() {
    this.$bus.$on('hello', (data) => {
      console.log('我是school组件，收到数据了', data)
    })
  },
  beforeDestroy() {
    this.$bus.$off('hello')
  },
}
</script>

<style lang="less" scoped>
.school {
  background-color: skyblue;
  padding: 5px;
}
</style>

Student.vue

<template>
  <!-- 组件的结构 -->
  <div class="student">
    <h2>学生姓名:{{ name }}</h2>
    <h2>学生性别:{{ sex }}</h2>
    <button @click="sendStudentName">传递学生名称给学校</button>
  </div>
</template>

<script>
// 第一步：创建学校组件
export default {
  name: 'Student',
  data() {
    return {
      name: '张三',
      sex: '男',
    }
  },
  methods: {
    sendStudentName() {
      this.$bus.$emit('hello', this.name)
    },
  },
}
</script>

<style scoped>
.student {
  background-color: orange;
  padding: 5px;
  margin-top: 30px;
}
</style>