代码优先

body div id=' root ' div input v-model=' input value '/button @ click=' handle click ' submit/button/div ul todolist v-for='(item，index)' list ' : key=' index ' : content=' item ' : index=' index ' @ delete=' handle '/todolist/ul/div script vue.component(' todolist '，{ props: ['content '，' index']，template: '$emit('delete '，this . index)} })new Vue({ El : ' # root '，data : { input value e : ' '，list:[] }，methods : { handleclick : function(){ this . list . push(this . input value)this . input value=' ' }，handle : function(index){ this。list.split (index，1)}}})/script/body创建todolist的基本结构

div id=' root ' div input v-model=' input value '/button @ click=' handleClick ' submit/button/div ul todolit v-for=' list '的(item，Index): key=' Index ' : content=' item ' : Index=' Index ' @ delete=' handle '/todolit/ul/div这里，我们创建一个todolit标记作为父组件，让它在列表中循环作为我们的输出，并定义一个删除侦听事件。

接下来，定义脚本标签中的子组件

Vue.component('todolist '，{ prop s 3360[' content '，' index']，template : ' Li @ click=' handleDelete ' { content } }/Li '，methods : { handledelet 3360 function(){ this。$ emit ('delete '，这个。index)}})定义了一个全局子组件。子组件的props选项可以从父组件接收数据。道具只能单向传递，即只能通过父组件传递给子组件。这里，上面父组件的内容和索引是向下传递的。

使用li标签作为子组件的模板，添加监听事件句柄删除并单击li标签将其删除。

定义下面子组件的handleDelete方法，并使用它。$emit与父组件通信。这里，传入一个删除的事件，参数是index。父组件监听并通过@delete接收参数

接下来是Vue的例子

new Vue({ el:'#root '，data: { inputValue: ' '，list:[] }，methods : { handleclick : function(){ this . list . push(this . inputvalue)this . inputvalue=' ' }，handle3360 function(index){ this . list . splice(index，1)})handleclick方法会在每次单击提交按钮时向列表中添加一个值，并清空输入框

处理方法是点击删除li标签，这里通过接受传入的索引参数来判断点击了哪个li

这是在删除之前：

这是在删除之后：

总结：

通过单击子组件的li向外触发删除事件，同时父组件监听子组件的delete事件并执行父组件的handle方法，从而删除索引对应的列表项，todolist中的列表项也将被删除。

好了，这就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。