全局事件总线

适用于任意组件

使用方法

        1，先创建一个事件总线

                要求得是所有组件都能访问到的地方，根据原型链这个地方就是Vue的原型对象身上

在Vue的原型对象上 创建一个全局事件总线

new Vue({
    // 指定容器
    el: '#app',
    // 解析App模板
    render: h => h(App),
    // 创建一个全局事件总线
    beforeCreate() {
        Vue.prototype.$bus = this
    }
})

2，怎样使用

        在接受数据的组件中绑定自定义事件，在发送数据中使用自定义事件

<script>
export default {
  name: "School",
  data() {
    return {
      name: "atguigu",
      address: "北京",
      stuName: "",
    };
  },
  methods: {
    getStuName(name) {
      console.log("我是School", name);
      this.stuName = name;
    },
  },
  mounted() {
//绑定全局事件
    this.$bus.$on("getStuName", this.getStuName);
  },
  // 解绑事件
  beforeDestroy() {
    this.$bus.$off("getStuName");
  },
};
</script>

 在发送数据的组件中调用全局事件

<script>
export default {
  name: "Student",
  data() {
    return {
      name: "张三",
    };
  },
  methods: {
    send() {
      console.log("fasong");
      this.$bus.$emit("getStuName", this.name);
    },
  },
};
</script>

是自定义组件的一个提升