12. vue2 利用广播实现非父子组件的传值

一、 利用广播的方式实现非父子组件传值的步骤

1.1 新建一个js文件 VueEmit.js ，在其中引入 vue ，接着实例化 vue ，最后暴露出这个实例

1.2 在要广播的地方引入刚才定义的实例

1.3 通过 VueEmit.$emit('名称','数据') 发送数据

1.4 在接收收数据的地方通过 $on 接收广播的数据

VueEmit.$on('名称', (data) => {

})

二、 样例

2.1 VueEmit.js

import Vue from "vue";

var VueEvent = new Vue();

export default VueEvent;

2.2 Home.vue

<template>
  <!-- 所有的内容要被根节点包含起来 -->
  <div id="home">
    我是首页组件
    <br />
    <button @click="emitNews()">给News组件广播数据</button>
    <br />
  </div>
</template>

<script>
//引入 vue 实例
import VueEvent from "../model/VueEvent.js";

export default {
  data() {
    return {
      msg: "我是一个home组件",
    };
  },
  methods: {
    emitNews() {
      //广播数据
      VueEvent.$emit("to-news", this.msg);
    },
  },
  mounted() {
    //监听news 广播的数据
    VueEvent.$on("to-home", function (data) {
      console.log(data);
    });
  },
};
</script>

<style lang="scss" scoped></style>

2.3 News.vue

<template>
  <div id="news">
    我是新闻组件
    <br />
    <button @click="emitHome()">给Home组件广播数据</button>
    <br />
  </div>
</template>

<script>
// 引入 vue实例
import VueEvent from "../model/VueEvent.js";

export default {
  data() {
    return {
      msg: "我是一个新闻组件",
    };
  },
  methods: {
    emitHome() {
      // 广播
      VueEvent.$emit("to-home", this.msg);
    },
  },
  mounted() {
    VueEvent.$on("to-news", function (data) {
      console.log(data);
    });
  },
};
</script>

<style lang="scss" scoped></style>