vuejs单一事件管理组件间的通信 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="vue.js"></script>
  <script type="text/javascript">
  // 单一事件管理
  var Event = new Vue();

  // A组件发送数据
  var A = {
      data() {
        return {
          a: '我是a数据'
        }
      },
      template: `
      <div>
      <span>{{a}}</span>
      <button @click="send">我是组件a</button>
      </div>
      `,
      methods: {
        send() {
          Event.$emit('data-a', this.a)
        }
      }
    };

  // B组件发送数据
  var B = {
      data() {
        return {
          b: '我是b数据'
        }
      },
      template: `
      <div>
      <span>{{b}}</span>
      <button @click="send">我是组件b</button>
      </div>
      `,
      methods: {
        send() {
          Event.$emit('data-b', this.b)
        }
      }
    };

  // C组件接受数据
  var C = {
      data() {
        return {
            a:'',
            b:''
        }
      },
      template: `
      <div>
      <span>{{a}}</span>
      <span>{{b}}</span>
      </div>
      `,
      mounted() {
        Event.$on('data-a',function(data){
            this.a = data
        }.bind(this));
        Event.$on('data-b',function(data){
            this.b = data
        }.bind(this));

      }
    };


    window.onload = function() {
      var app = new Vue({
        el: '#box',
        components: {
          'com-a': A,
          'com-b': B,
          'com-c': C
        }
      })
    }
  </script>
</head>

<body>
  <!-- 组件间得通信管理 -->
  <div id="box">
    <div>
      <com-a></com-a>
      <com-b></com-b>
      <com-c></com-c>
    </div>
  </div>
</body>

</html>

定义了一个全局对象，组件把数据发送出去，任何组件都可以接收到数据

posted @ 2017-03-28 00:21  wmui  阅读(887)  评论(0)  编辑  收藏  举报