VUE实名插槽的集成

接续TODOLIST实例
下面是App.vue的template部分：

<Footer>
    <input slot="isCheck" type="checkbox" v-model="isCheck"/>
    <span slot="finish">已完成{{finishedCount}}件/总计{{todos.length}}件</span>
    <button slot="delete" class="btn btn-warning" @click="delFinishedTods">清除已完成任务</button>
</Footer>

下面是App.vue计算属性的部分：

computed:{
          finishedCount(){
              return this.todos.reduce((total, todo)=>total + (todo.finished ? 1: 0),0);
              //遍历javascript方法
          },
          isCheck:{
              get(){
                  return this.finishedCount  === this.todos.length && this.todos.length > 0;
              },
              set(value){
                  this.selectedAllTodo(value);
              }
          }
      },

下面是Footer.vue的template部分。

<div class="todo-footer">
    <label>
       <slot name="isCheck"></slot>
       <slot name="finish"></slot>
    </label>
       <slot name="delete"></slot>
</div>

子组件里面写了几个实名插槽slot，父组件对组件里面的插槽进行赋值，用slot=""表示给哪一个插槽赋值。