功能：模仿todolist，增加條目，點擊條目，刪除該條目
局部組件接收父值通過props
子組件給父傳值$emit事件廣播，父再接收
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>TodoList</title> 5 <script src="./vue.js"></script> 6 </head> 7 <body> 8 <div id="app"> 9 <input type="text" v-model="inputVal"/> 10 <button v-on:click="handleClick">提交</button> 11 <ul> 12 <todo-item v-bind:content="item" 13 v-bind:index="index" 14 v-for="(item,index) in list" 15 @delete="handleItemDelete"> 16 </todo-item> 17 </ul> 18 </div> 19 <script> 20 21 22 // 全局組建 23 // Vue.component("TodoItem",{ 24 // props:['content'], 25 // template:"<li>{{content}}</li>" 26 // }); 27 28 //局部組件 29 //局部組件接收父值通過props 30 //子組件給父傳值$emit事件廣播，父再接收 31 var TodoItem = { 32 props:['content','index'], 33 template:"<li @click='handleItemClick'>{{content}}</li>", 34 methods:{ 35 handleItemClick:function(){ 36 this.$emit("delete",this.index); 37 } 38 } 39 }; 40 var app = new Vue({ 41 el:'#app', 42 components:{ 43 TodoItem:TodoItem 44 }, 45 data:{ 46 list:[], 47 inputVal:"" 48 }, 49 methods:{ 50 handleClick:function(){ 51 this.list.push(this.inputVal) 52 }, 53 handleItemDelete:function(index){ 54 this.list.splice(index,1); 55 } 56 } 57 }) 58 </script> 59 </body> 60 </html>