練習元件化及父子元件間傳值（TodoList小案列）
阿新 • • 發佈：2019-02-12
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>練習父子元件間的傳值及元件化思想</title> </head> <body> <script src="https://vuejs.org/js/vue.js"></script> <div id="app"> <input type="text" v-model="inputValue" > <button @click="commitInput">提交</button> <ul> <!-- <li v-for="list in lists">{{list}}</li> --> <my-list :list=list :index="index" v-for="(list,index) in lists" @delete="fatherDelete"></my-list> </ul> </div> <script > // 建立區域性元件 var myList={ props:['list','index'], template:"<li @click='handleDelete'>{{list}}</li>", methods:{ handleDelete:function(){ this.$emit("delete",this.index) } } } var vm = new Vue({ el:'#app', components:{myList:myList}, data:{ inputValue:'', lists:[] }, methods: { commitInput(){ this.lists.push(this.inputValue) this.inputValue="" }, fatherDelete(index){ this.lists.splice(index,1) } } }) </script> </body> </html>
記錄自己學習的學習過程，做了一個todoList的小案列。