Vue---todolist的组件化编程

主组件




子组件




这个删除功能的实现逻辑:
1、由主组件通过:index="index"向子组件发送index属性,告诉子每个子组件自己的编号,子组件通过props[“index”]
接收这个属性
2、为了让每个子组件都能够有删除功能,应给每个子组件添加点击事件@click:‘handleDelete’
handleDelete将触发子组件的方法this.$emit(“delete”,index),由被点击的子组件向主组件的delete事件发送参数index
3,主组件接收子组件发来的index值,并触发delete事件
delete(index){
this.list.splice(index,1)//删除下标为index起的一个元素
}
一旦list中的index对应的元素被删除,那么这个子组件也就被删除了,至此完成删除功能。

你可能感兴趣的:(Vue)