1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title> todolist删除</title> 6 <link rel="stylesheet" href="test1.css"> 7 <script type="text/javascript" src="vue.js"></script> 8 9 </head> 10 <body> 11 <div id="rooter"> 12 <input type="text" v-model="valueput"/> 13 <button @click="handler">提交</button> 14 <ul> 15 <todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index" 16 @delete="handleDelete"></todo-item> 17 </ul> 18 </div> 19 <script> 20 var todoitem={ 21 props:["content","index"], //将值从父组件来接听 22 template:'<li @click="had">{{content}}</li>', 23 methods:{ 24 had:function () { 25 this.$emit("delete",this.index); //可以将值传给父组件 26 } 27 } 28 }; 29 new Vue({ 30 el:'#rooter', 31 data:{ 32 valueput:"", 33 list:[], 34 content:'' 35 }, 36 components:{ 37 'todo-item':todoitem 38 }, 39 methods:{ 40 handler:function(){ 41 this.list.push(this.valueput); 42 this.valueput=""; 43 44 }, 45 handleDelete:function(index){ 46 this.list.splice(index,1); 47 } 48 } 49 50 }); 51 console.log(1); 52 </script> 53 </body> 54 </html>
父组件向子组件传递参数，通过属性的方式和props
子组件向父组件传递参数，通过发布的方式：this.$emit("",...............)