vue 全局事件总线

1. 在main.js中安装全局事件总线

// 引入vue app
import Vue from "vue";
import App from "@/App";

// 关闭生产提示
Vue.config.productionTip = false

// 创建vm
new Vue({
    el:'#app',
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this // 安装全局事件总线
    }
})

2. school组件绑定hello自定义事件

<template>
  <div class="school">
    <h2>学校名字：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
  </div>
</template>

<script>

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "School",
  data(){
    return {
      name:'尚硅谷',
      address:'北京',
    }
  },
  mounted() {
    this.$bus.$on('hello', (data)=>{
      console.log('我是School组件，收到数据：', data)
    })
  },
  beforeDestroy() {
    // 解绑事件 组件销毁时解绑事件
    this.$bus.$off('hello')
  }
}
</script>

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

3.student组件触发hello自定义事件

<template>
  <div class="student">
    <h2>学生姓名：{{name}}</h2>
    <h2>学生性别：{{sex}}</h2>
    <button @click="sendStudentName">把学生名字给school组件</button>
  </div>
</template>

<script>

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Student",
  data(){
    return {
      name:'张三',
      sex:'男',
    }
  },
  mounted() {
  },
  methods:{
    sendStudentName(){
      this.$bus.$emit('hello', this.name)
    }
  }
}
</script>

<style scoped>
.student{
  background-color: greenyellow;
}
</style>