<body> <div id = "app"> <input type="text" v-model="inputValue"/> <button v-on:click="handleBtnClick">提交</button> <ul> <!-- <li v-for="item in list">{{item}}</li>--> <todo-item v-bind:content="item" v-bind:index="index" v-for="(item,index) in list" @delete = "handleItemDelete"><!--监听事件--> </todo-item> </ul> </div> <script> /*Vue.component("TodoItem",{//全局组件 props:["content"], template :"<li>{{content}}</li>" })*/ var TodoItem = { //局部组件，需要在实例中声明 props:["content","index"], template :"<li @click='handleItemClick'>{{content}}</li>", methods:{ handleItemClick:function () { this.$emit("delete",this.index);//触发事件 } } } var app =new Vue({//创建实例 el:"#app",//实例负责管理的dom区域 components:{ //子组件声明 TodoItem: TodoItem, }, data:{ list: [], inputValue: "" }, methods:{ handleBtnClick:function () { this.list.push(this.inputValue); this.inputValue=""; }, handleItemDelete:function (index) { this.list.splice(index,1); } } }) </script> </body>