props传递函数

父组件

<template>
<!-- 1-视图层 -->
  <div class="todo-container">
    <div class="todo-wrap">
      <Header  ref="head"/>
      <List 
      :todos="todos" 
      :deleteTodo="deleteTodo"
      :updataTodo="updataTodo"
      />

    </div>
  </div>
</template>

<script>
// 2-逻辑层
import Header from "@/components/Header"
import List from "@/components/List"
export default {
  name: "App",
  data(){
    return {
      // 拿到localStorage的todos,把字符串转为对象
      // 因为一开始todos是没有值的,为null,所以需要设置为空数组
      todos:JSON.parse(localStorage.getItem("todos")) || [],
    }
  },
  components:{
    Header,
    List,
  },
  methods:{

    // 删除数据
    deleteTodo(index){
      this.todos.splice(index, 1)
    },
    // 修改数据
    updataTodo(index){
      this.todos[index].isOver=!this.todos[index].isOver
    },
  },
};
</script>

子组件

<template>
  <div class="todo-footer">
    <label>
        <!-- v-model不一定要绑定data声明的数据 -->
        <!-- 这里v-model绑定的是computed属性计算的值 -->
      <input type="checkbox" v-model="checkAll"/>
    </label>
    <span> <span>已完成{{overNum}}</span> / 全部{{allNum}} </span>
    <button class="btn btn-danger" @click="deleteA">清除已完成任务</button>
  </div>
</template>

<script>
export default {
    name:"Footer",
    props:["todos","deleteTodo","updataTodo"],
    methods:{
        deleteA(){
            this.deleteTodo()

        }
    },
    computed:{
        allNum(){
            return this.todos.length;
        },
        overNum(){
            // 第一种
            // return this.todos.filter(item=>item.isOver).length

            // 第二种
            return this.todos.reduce((prev,item)=>{
                if(item.isOver) prev+=1;
                return prev
            },0)
        },
        checkAll:{
            get(){
                // 满足 this.allNum===this.overNum 的情况下 并且 this.allNum>0
                // 需要满足两个条件 才为true
                return this.allNum===this.overNum && this.allNum>0
            },
            set(val){
                // 一开始为false,点击按钮以后设置为true,依次更改
                console.log(val)
                this.updataAll(val)
            }
        }
    }
};
</script>