ToDoList删除功能
程序员文章站
2022-03-16 12:44:27
...
ToDoList删除功能
在Vue之中，父组件向子组件传值通过属性的形式进行传的值传递
- 父组件？子组件？在父组件里面通过属性的形式给子组件传递具体的内容
- 循环展示每一个子组件时（父组件调用子组件），通过属性形式（content）给子组件传递值，而子组件接收属性内容
- 而后在子组件模板上，进行内容的显示。
之前功能，添加test1和test2，点击test1的时候，可以删除该数据。
- 子组件里面给li标签绑定一个事件，在handleClick里面实现子组件删除
子组件显示与否，取决于父组件list: [] 这个数据，如果想实现子组件的删除，需在父组件里面把子组件对应数据给删除
子组件若想删除掉，一定要在父组件里面把渲染子组件的数据删除掉，这样子组件自动不会显示。
- 当点击子组件，需要让子组件和父组件通信？在Vue中发布订阅模式
- 在做这个事情之前，子组件还需接收一个参数：当前子组件在列表之中的下标（父组件循环显示子组件添加参数index）
页面展示入下
- 当子组件被点击时，需要通知父组件把数据删除掉（子组件发布）
this.$emit('delete',this.index) 调用$emit方法，触发'delete'自定义事件，值为这个组件index的值
代码如下
页面不报错，点击test1,说明 this.$emit('delete',this.index) 可正常执行，入下图
这个组件向外emit触发了一个事件，这个事件里面携带了index的值，子组件向外部进行一个发布。
- 父组件在模板里面创建子组件时，同时可以监听子组件向外触发的delete事件，如果父组件监听到了子组件的delete事件的时候，执行handleDelete函数。
- 在父组件的methods里面，编写handleDelete方法
页面效果
注意：此时父组件可以监听到子组件向外触发的delete事件，并执行自己的handleDelete方法
- 在handleDelete方法里面，可以接收到它传递过来的index参数，代码如下
页面效果
- 删除掉父组件里面 list对应下标的内容
代码如下
页面效果
完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue学习</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleClick">提交</button>
</div>
<ul>
<todo-item v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"
>
</todo-item>
</ul>
</div>
<script>
Vue.component('todo-item',{
props: ['content','index'],
template: '<li @click="handleClick">{{content}}<li>',
methods: {
handleClick: function () {
this.$emit('delete',this.index)
}
}
})
new Vue({
el: "#root",
data:{
inputValue: '',
list: []
},
methods: {
handleClick: function () {
this.list.push(this.inputValue)
this.inputValue = ''
},
handleDelete: function (index) {
this.list.splice(index,1)
}
}
})
</script>
</body>
</html>
通过子组件向父组件传值的形式，删除TodoItem的功能