欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-09 22:03:10
最近在学习vue组件鸡组件之前通信问题,正好看到,以此来留作笔记。 ...

最近在学习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>

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