代碼如下所示：

<div id="app"> <input v-model="inputValue"> <button @click="handleSumbit">提交</button> <todo-item v-for="(item,index) of list":key="index":content="item":index="index"  @delete="handleDelete"></todo-item></div>

子組件向父組件傳遞數(shù)據(jù)使用 this.$emit('delete',this.index)該方法

<script > Vue.component('todo-item',{  props:["content",'index'],  template:"<li @click='handleSubmit'>{{content}}{{index}}</li>",  methods:{   handleSubmit:function () {    this.$emit('delete',this.index)   }  } }) new Vue({  el:'#app',  data:{   inputValue:'',   list:[]  },  methods:{   handleSumbit:function () {    this.list.push(this.inputValue);    this.inputValue="";   },   handleDelete:function (index) {    this.list.splice(index,1)   }  } })</script>

總結(jié)

以上所述是小編給大家介紹的Vue實(shí)現(xiàn)todolist刪除功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)錯(cuò)新站長(zhǎng)站網(wǎng)站的支持！