Vue从TodoList中学父子组件通信(2)

template: '<li v-on:click="handleItemClick">{{item}}</li>'' //绑定事件为 click，需要执行的函数是 handleItemClick methods: { //写在组件里面 handleItemClick() { this.$emit('delete', this.index) } }

父元素监听事件

<todo-list v-for="(item,index) in list" v-bind:item="item" v-bind:index="index" v-on:delete="handleItemDelete" //监听 delete 事件， 执行函数是 handleItemDelete ></todo-list> handleItemDelete(index) { //写在 Vue 实例中 this.list.splice(index, 1) }

通过父子组件之间的通信，就可以实现 父->子 子->父 之间数据传输问题。