1，子组件 TodoItem.vue :
<template>
<div class="todo-item" :class="{'is-complete':todo.completed}">
<p>
<input type="checkbox" @change="markComplete">
{{todo.title}}
<button class="del" @click="$emit('deleteItem',todo.id)">x</button>
</p>
</div>
</template>
2，父组件 Todos.vue :
<template>
<div>
<div v-for="todo in a" :key="todo.id">
<TodoItem :todo="todo" @deleteItem="deleteItem"/>
</div>
</div>
</template>
<script>
import TodoItem from './TodoItem'
export default {
name:'todos',
data(){
return{
a:this.todos
}
},
props:{
todos:{
type:Array
}
},
components:{
TodoItem:TodoItem
},
methods:{
deleteItem(id){
console.log('id : '+id);
}
}
}
</script>