Vue组件通信：props和$emit

组件结构：

-- CheckList（父组件）
-- CheckItem（子组件）

父组件通过props向子组件传递数据

var CheckList = {
  components:{
    'check-item': CheckItem,
  },
  methods: {
    onItemChange: function(checked,id){
      this.list.map( item => {
        if(item.id === id){
          item.checked = checked
        }
      });
      const result = this.list.every( item => { return item.checked } )
      this.$data.allChecked = result
      this.$data.invertChecked = false
    },
  },
  data: function () {
    return {
      name: 'check-list',
      list: [
        { id: 1, label: 'red', checked: false },
        { id: 2, label: 'yellow', checked: false },
        { id: 3, label: 'blue', checked: false }
      ],
      allChecked: false,
      invertChecked: false
    }
  },
  template: `
    <div>
      <ul class="check-list">
        <check-item v-for="item in list" v-bind:item="item" :key="item.id" v-on:change="onItemChange"></check-item>
      </ul>
      <div class="check-action">
        <label><input type="checkbox" v-model="allChecked" v-on:click="onCheckAll"/><span>全选</span></label>
        <label><input type="checkbox" v-model="invertChecked" v-on:click="onCheckInvert"/><span>反选</span></label>
      </div>
    </div>
  `
}

子组件通过$emit向父组件传递数据

var CheckItem = {
  props: {
    item: {
      type: Object
    }
  },
  data: function () {
    return {
      name: 'check-item',
    }
  },
  template: `
    <li class="check-item">
      <label><input type="checkbox" v-bind:checked="item.checked" v-on:change="$emit('change',$event.target.checked,item.id)" />{{ item.label }}</label>
    </li>
  `
}

完整代码：

github.com/pengjielee/…