代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="inputValue"> <button @click="press">press</button> <ul> <todo-item :content="i" v-for="(i,index) in list" :index="index" @delete="deleteChild(index)"></todo-item> </ul> </div> <script> let todoItem = { props:['content'], template:'<li @click="press">{{content}}</li>', methods: { press(target) { this.$emit('delete') } } } const app = new Vue({ el:'#app', data:{ list:['第一','第二'], inputValue:'' }, components:{ TodoItem:todoItem }, methods:{ press: function () { // alert("press") this.list.push(app.$data.inputValue) this.inputValue = '' }, deleteChild:function (childNode) { console.log(childNode) this.list.splice(childNode,1) } }, beforeUpdate() { console.log(this.$el) }, updated() { console.log("数据以及改变，开始执行") } }) </script> </body> </html>