todo-list为例子:
代码:
父传子--------------属性 v-bind
子传父--------------$emit
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TodoList</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 :content="item" :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>