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

2019-11-19 17:26:09

字体：大中小

来源：转载

供稿：网友

最近在学习vue组件鸡组件之前通信问题，正好看到，以此来留作笔记。

<!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组件的数据->{{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组件的数据->{{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的数据为: {{a}}</span>        <br>        <span>接收过来B的数据为: {{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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：js模拟微博发布消息

下一篇：微信小程序开发之顶部导航栏实例代码