通过$emit与$on进行兄弟组件之间的数据传输通信

作者: web蜗牛 | 来源:发表于2017-10-11 23:06 被阅读0次

Vuejs 用$emit与$on来进行数据传输通信
通过$emit与$on进行兄弟组件之间的数据传输通信
vue里面组件通讯
vue组件之间通信
vue组件通信
vue2.0小结
$emit $on
VUE组件之间多种通信方式
组件通信
vue组件间的通信问题

最近入职一家新公司，VUE要从零基础学习。之前在VUE官方文档上面看的一些定义还是比较抽象的，现在有了实际项目，再对照文档看就会更加清晰地理解。今天看代码第二天，找出了一个重点，就是组件之间的通信。

API原文解释：
$on:监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
$emit:触发当前实例上的事件。附加参数都会传给监听器回调。

先来一个简单的例子来说明：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Vue2-单一事件管理组件通信</title>
  <script src="vue.js"></script>
  <script type="text/javascript">


  //准备一个空的实例对象
  var Event = new Vue();


  //组件A
  var A = {
    template: `
      <div>
        <span>我是A组件的数据->pw_a</span>
        <input type="button" value="把A数据传给C" @click = "send">
      </div>
    `,
    methods: {
      send () {
        Event.$emit("a-msg", this.a);
      }
    },
    data () {
      return {
        a: "我是a组件中数据"
      }
    }
  };
  //组件B
  var B = {
    template: `
      <div>
        <span>我是B组件的数据->pw_a</span>
        <input type="button" value="把B数据传给C" @click = "send">
      </div>
    `,
    methods: {
      send () {
        Event.$emit("b-msg", this.a);
      }
    },
    data () {
      return {
        a: "我是b组件中数据"
      }
    }
  };
  //组件C
  var C = {
    template: `
      <div>
        <h3>我是C组件</h3>
        <span>接收过来A的数据为: pw_a</span>
        <br>
        <span>接收过来B的数据为: pw_b</span>
      </div>
    `,
    mounted () {
      //接收A组件的数据
      Event.$on("a-msg", function (a) {
        this.a = a;
      }.bind(this));


      //接收B组件的数据
      Event.$on("b-msg", function (a) {
        this.b = a;
      }.bind(this));
    },
    data () {
      return {
        a: "",
        b: ""
      }
    }
  };
  window.onload = function () {
    new Vue({
      el: "#box",
      components: {
        "dom-a": A,
        "dom-b": B,
        "dom-c": C
      }
    });
  };




  </script>
</head>
<body>
  <div id="box">
    <dom-a></dom-a>   
    <dom-b></dom-b>   
    <dom-c></dom-c>   
  </div>


</body>
</html>

在使用这两个事件时会出现一点问题，有经验的同学肯定都知道了，那就是$on和$emit的事件必须是在一个公共的实例上，才能触发。解决方案是创建一个空的 Vue 实例对象作为中央事件总线（全局事件桥梁）来中转事件。