快速建网站搜收录网

经过上次的写法，我们已经写出每个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我赋的值，这里暂时还不知道怎么解决，明天再看