经过上次的写法，我们已经写出每个list项，现在要在每个父组件下面加入自己的子项
一、新建子组件：
smallItem.vue：

<script>
export default{
    props:['text','id','status']	//父组件传来的参数
}
</script>
<template>
	(...html代码...)
	<input class="item_child_input form-control" :value=text>
	//这里的text就是props传进来的text
</template>

二、在父组件里引入子组件：
item.vue:

<script>
	import smallItem from './smallItem.vue'	//引入子组件
	export default{
		components:{
	        smallItem		//声明组件
	    }
	}
</script>
<template>
	<div class="children_div" v-if="IsOpen">	//循环调用
		<smallItem v-for="child in children" :key="child.id" :status=child.status :text=child.text :id=child.id></smallItem>
    </div>
</template>

注意：
1.循环时在v-for后面要加:key，不然会报错
2.:id写在最后
3.样式调整：
由于vue采用flex布局，有时会出现元素错乱的情况，这里我在index.html里加入了一句样式

<style>
  #app{
    grid-template-columns: 1fr;
  }
</style>

呈现效果：

大家可以看一下dom的渲染：

三、加入事件
在子组件里，我们加入了一个点击事件：
smallItem.vue:

methods:{
        Check(event){
            this.checkStatus = this.checkStatus == 0 ? 1 : 0;
        }
    },

(这里本来是命名为status，但vs提示说status被弃用，我猜应该是status是vue关键字，于是换了一个名字checkStatus)
开始测试，触发Check事件发现，控制台报错说this里面的变量是不允许被set的：
TypeError: ‘set’ on proxy: trap returned falsish for property ‘checkStatus’
这里的checkStatus当然就是props里面的变量，是不允许被改变的；
于是在本组件里定义一个自己的变量：

data(){
        return{
            checkStatus:this.checkStatus
        }
    }

这时的this.checkStatus就变成了我们重新定义的这个变量，就可以赋值了
实现效果：
点击子组件的对号小图标，记录为已完成
这里发现了一个问题，this.checkStatus在下次的调用被改回来了，我想可能是data里的return没有return我赋的值，这里暂时还不知道怎么解决，明天再看