props的接收方式

1.简单数组方式

只能进行属性的接收而已，但是无法实现类型判断，默认值设置、是否必需以及自定义校验规则

props:["todos","deleteTodo","updataTodo"]

2.简单对象方式

据类型的简单判断，但是无法实现默认值设置、是否必需以及自定义校验规则

props:{
    // 如果传过来的数据不是数组,那么会报错
    todos:Array,
    deleteTodo:Function,
    updataTodo:Function
  }

3.复杂对象方式

对数据类型可以判断，确认是否必需，设置默认值，自定义校验规则

props:{
   todos:{
     type:Array,
     required:true, // 必须传入,不传会报错
     default(){
       // 如果没有传值就会使用默认值
       // ! 如果是基础数据类型，那么可以直接进行设值
       // ! 数组与对象类型的默认值，需要利用工厂函数进行设置
       return [{content: "我爱你", id: 1, isOver: false}]
     },

     // 自定义校验规则,对传过来的数据进行校验
     // validator:function(value){
     //   // value是传过来的数据
     //   // console.log(value)

     //   // custom validator check failed for prop "todos".如果不符合数据监测失败
     //   return value[0].isOver===true
     // }
   },
   // 也可以参杂简单对象模式
   deleteTodo:Function,
   updataTodo:Function
 }

全部代码

<template>
  <ul class="todo-main">
    <Item v-for="(todo, index) in todos" 
        :key="todo.id" 
        :todo="todo" 
        :index="index"
        :deleteTodo="deleteTodo"
        :updataTodo="updataTodo"
        />
  </ul>
</template>

<script>
import Item from "@/components/Item"
export default {
    name:"List",
    // props:属性接受的方式
    // 1.简单数组方式，只能进行属性的接收而已，但是无法实现类型判断，默认值设置、是否必需以及自定义校验规则
    // props:["todos","deleteTodo","updataTodo"],

    // 2.简单对象方式，对数据类型的简单判断，但是无法实现默认值设置、是否必需以及自定义校验规则
    // props:{
    //   // 如果传过来的数据不是数组,那么会报错
    //   todos:Array,
    //   deleteTodo:Function,
    //   updataTodo:Function
    // },

    // 3.复杂对象方式,对数据类型可以判断，确认是否必需，设置默认值，自定义校验规则
    props:{
      todos:{
        type:Array,
        required:true, // 必须传入,不传会报错
        default(){
          // 如果没有传值就会使用默认值
          // ! 如果是基础数据类型，那么可以直接进行设值
          // ! 数组与对象类型的默认值，需要利用工厂函数进行设置
          return [{content: "我爱你", id: 1, isOver: false}]
        },

        // 自定义校验规则,对传过来的数据进行校验
        // validator:function(value){
        //   // value是传过来的数据
        //   // console.log(value)

        //   // custom validator check failed for prop "todos".如果不符合数据监测失败
        //   return value[0].isOver===true
        // }
      },
      // 也可以参杂简单对象模式
      deleteTodo:Function,
      updataTodo:Function
    },

    components:{
        Item
    }
};
</script>