使用Vue父子组件通信实现todolist的功能示例代码

2020-06-14 06:11:49易采站长站整理

el:"#root",
data: {
inputValue:'',
list:[] },
methods: {
handleClick:function(){
this.list.push(this.inputValue)
this.inputValue=''
},
handle:function(index){
this.list.splice(index,1)
}
}
})

handleClick方法实现每次点击submit按钮时向list里添加值,在每次添加之后将输入框清空。

而handle方法则是点击删除li标签,这里通过接受传入的index参数来判断点击的是哪一个li

这是删除前:

这是删除后:

总结:

通过点击子组件的li实现向外触发一个delete事件,而父组件监听了子组件的delete事件,执行父组件的handle方法,从而删除掉对应index的列表项,todolist中的list对应项也会被删除掉。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对软件开发网的支持。