vue全局事件总线

vue组件间传值有很多种方法，这里我们来讲讲如何利用全局事件总线来进行组件间传值。先讲讲我们需要实现的一个案例，我们需要在兄弟组件中传值，将Student.vue中的学生信息传递给School.vue中进行使用，下面我们进行详细的操作。

一、注册全局事件总线

在一个创建好的vue2项目中注册全局事件总线(即在Vue的原型对象上添加一个对象$bus)，用于存放数据。我们都知道最大的组件是通过new Vue创建的实例对象，那么该组件能够通过隐式原型链访问到$bus。子组件是VueComponent的实例对象，而VueComponent有一条显示原型链指向Vue的实例对象，所以子组件也能访问到$bus。现在我们来注册全局事件总线，在入口文件main.js中给Vue的原型对象添加$bus。这里我们可以看到在Vue的原型对象上多了一个$bus

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')

二、 创建Student组件并传递数据

这里我们创建一个名为Student.vue的组件，并在data中定义一个学生信息，然后在生命周期钩子中将数据传递出去(并不是一定要在生命周期中将数据传递出去，可以触发事件将数据传递出去，这里不想多写就直接传递了)，这里使用了一个方法$emit(emit有发送、发出的意思)，这里讲一下$emit()这个api，传递两个参数，第一个是事件名，第二个是传递的数据(可传递多个，用逗号隔开)。下面附上vue官网的api

<script>
export default {
  name: "Student",
  data() {
    return {
      person: {
        name: "张三",
        age: 18,
        sex: "男",
      },
    };
  },
  mounted() {
    // 发送学生信息
    this.$bus.$emit("sendStudentInfo", this.person);
  },
};
</script>

 

API — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://cn.vuejs.org/v2/api/#vm-emit

 三、在School组件接收由Student组件发出的参数

同理，首先创建一个School组件。这里我们同样通过生命周期钩子来获取Student组件传递过来的数据。我们是将数据存在$bus中的，这里我们数据也要在$bus中获取。同样我们使用了一个api  $on 用于获取$bus中的数据，这个方法同样传入两个参数，第一个是方法名，这里是要和我们传数据的方法名对应，不然不能获取数据。第二个是一个回调函数，函数内的参数就是我们传过来的数据(根据传递过来的数据，可接收多个)，下面我们获取数据后就可以使用数据了。这里我只是简单的将数据显示在页面。最后附上 $on 的api

<template>
  <div>
    <h1>这里显示学生信息</h1>
    <h2>姓名：{{ studentInfo.name }}</h2>
    <h2>年龄：{{ studentInfo.age }}</h2>
    <h2>性别：{{ studentInfo.sex }}</h2>
  </div>
</template>

<script>
export default {
  name: "School",
  data() {
    return {
      studentInfo: {},
    };
  },
  mounted() {
    // 接收学生信息
    this.$bus.$on("sendStudentInfo", (data) => {
      this.studentInfo = data;
    });
  },
};
</script>

 API — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://cn.vuejs.org/v2/api/#vm-on

 这里就简单讲了一下如何使用全局事件总线来传递数据，如有误，请斧正！！！