<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>todoList删除</title> <script src="vue.js"></script> </head> <body> <div id="root"> <input type="text" v-model="inputValue"> <input type="button" value="Go" @click="toList"> <!--使用组件--> <ul> <!--监听delete事件(在实例中接收)--> <item-list v-for="(item,index) in list" :content="item" :index="index" @delete="toDel"></item-list> </ul> </div> <script> //定义全局组件 Vue.component('item-list',{ props:['content','index'], template:"<li>{{content}} <span @click='deleteData'>删除</span></li>", methods:{ deleteData:function () { //对外放开一个delete事件(然后在组件中监听) this.$emit('delete',this.index); } } }); new Vue({ el:"#root", data:{ inputValue:"", list:[] }, methods:{ toList:function () { this.list.push(this.inputValue); this.inputValue=''; }, toDel:function (index) { this.list.splice(index,1); } } }) </script> </body> </html>