vue兄弟组件通讯的实现

前言

最近把服务器换到阿里云，之前暂停的技能树也重新解析了。

正文

vue提供了很方便的父子组件通讯，基于Props我们可以做很多事情。在0.12版本中我是通过黑科技来实现兄弟组件的通讯。在1.0.8版本中，情况变的更加好。我们可以直接用官方的api的一些内容稍加组合就能实现。

因此我们来先讲明一下这里的兄弟组件指的是两个同级的组件需要同步一些相同的数据。

这里我将简述一个应用环境，具体代码不会给出，将把思路和关键代码阐述清楚。

首先是一个主页面app.vue

它包含两个子组件:

一个是checkbox.vue 它用来统计用户选择了多少个多选框，并显示.
一个是lists.vue 它里面还包含一个item.vue 用户的选择操作是在item.vue中定义的。数据也是在item.vue储存。单个Item.vue会将数据传给lists.vue。

目标是需要checkbox.vue能够获取item.vue里面每一个选项状况。

因为需要将item的数据传回lists。我们只需要在Item里的check操作中加入下列代码：


this.$dispatch('child-msg',"add",this.msg,this.id);

msg和id 都是在props里面定义的。

然后在Lists中监听child-msg事件：

events: {
    'child-msg': function (action,msg,no) {
      // 事件回调内的 `this` 自动绑定到注册它的实例上
      var that = this;
      if(action == "add"){
      	that.parentmsg.push(msg);  
      	that.parentno.push(no);
      }
      this.$parent.$data.alldata = that.parentmsg;
    }
  },

然后我们用$parent把数据传给app.vue

this.$parent.$data.alldata = that.parentmsg;

在app.vue里面:

  data:{
     alldata: []
  },

绕了一圈我们的数据到达了app.vue的data里面，然后我们直接给checkbox传过去:


<checkedbox v-bind:data=alldata></checkedbox>

记得用v-bind来绑定。

这里顺便提一句，如果你需要用v-for来将props传来的数据遍历，你需要换种形式。之前直接用v-for(item in items)是不可行的。

我们需要这么做：


	<li  transition="animate" class="checkeditem" v-for="n in data.length">
    <div class="name"></div> 
  </li>

这里再提一句，如何循环用v-for给子组件传递props里的数据.


<li v-for="item in count">
	<voteitem :id.sync="item.uid" :name.sync="item.name" ></voteitem>
</li>

结尾

期间遇到一些坑之前也没仔细看文档，后来群里有人指出方法，又再次仔细去看了一下文档。1.0的文档比0.12的好读一些=-=。什么时候能进阶到去看源码分析的地步呢。还是继续努力吧。

Table of Contents