组件之间数据交互

有时候非父子关系的组件也需要通信。在简单的场景下，使用一个空的 Vue 实例作为中央事件总线：

var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)

// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
  // ...
})

 

实例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="vue/vue.min.js"></script>
</head>

<body>
    <div id="app8">
        <ul>
            <li><componenta/></li>
            <li><componentb/></li>
        </ul>
    </div>
    <script type="text/javascript">
        var bus = new Vue();
        Vue.component('componenta', {
           
            template: '<div><input type="button" value="发布事件" @click="fabuevent" /></div>',
            data:function () {
              return {
                counter: 0
              }
            },
            methods:{
              fabuevent:function(){
                   this.counter++;
                   bus.$emit('id-selected', this.counter);
                }
            }
          });
        Vue.component('componentb', {
                template: '<div >{{counter}}</div>',
                data:function () {
                  return {
                    counter: 0
                  }
                },
                created:function(){
                    var self=this;
                  bus.$on('id-selected', function (id) {
                      self.counter=id;
                      console.info("id:"+id);
                  })
                }
              })
        var app8 = new Vue({
          el:"#app8"
        })
    </script>
</body>
</html>

这里使用 created或者 beforeCreate 事件。

posted on 2016-12-11 23:37  自由港  阅读(635)  评论(0)  编辑  收藏  举报