Like the parent component subassembly pass value
v-bind to pass through the subassembly, the subassembly receiving binding variables objects props
Parent component subassembly as traditional values
By this. $ Emit ( "delete", this.index), by the method of passing parameters to carry out, external monitor to start by acquiring events new event.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>简单的组件传值</title> <script src="./vue.js"></script> </head> <body> <div id="root"> <div> <input type="text" v-model="todoValue"/> <button @click="handleBtnClick">提交</button> </div> <ul> <todo-item v-bind:content="item" v-bind:index="index" v-for="(item,index) in list" @delete="handleItemDelete"> </todo-item> </ul> </div> <script> var TodoItem={ props:['content','index'], template:"<li @click='handleItemClick'>{{content}}</li>", methods:{ handleItemClick:function(){ this.$emit("delete",this.index); } }, } var app=new Vue({ el:"#root", components:{ TodoItem:TodoItem }, data:{ todoValue:"", list:[] }, methods:{ handleBtnClick:function(){ this.list.push(this.todoValue) this.todoValue="" }, handleItemDelete:function(index){ this.list.splice(index,1) } } }) </script> </body> </html>