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>
<script>
export default {
name:'todo',
props:["todo"],
methods:{
markComplete(){
this.todo.completed = !this.todo.completed
}
}
}
</script>
<style scoped>
.todo-item{
background: #f4f4f4;
padding: 10px;
border-bottom: 1px dotted #ccc ;
}
.is-complete{
text-decoration: line-through
}
.del{
background: #ff0000;
color: #fff;
border: none;
padding: 5px 9px;
border-radius: 50%;
cursor: pointer;
float: right;
outline: none
}
</style>
2，子组件 Todos.vue
<template>
<div>
<div v-for="todo in todos" :key="todo.id">
<TodoItem :todo="todo" @deleteItem="deleteItem"/>
</div>
</div>
</template>
<script>
import TodoItem from './TodoItem'
export default {
name:'todos',
props:["todos"],
components:{
TodoItem:TodoItem
},
methods:{
deleteItem(id){
this.$emit('handleDelete',id)
}
}
}
</script>
3，父组件 app.vue
<template>
<div id="app">
<Todos :todos="todos" @handleDelete="handleDelete"/>
</div>
</template>
<script>
import Todos from './components/Todos'
export default {
name:'app',
data(){
return{
todos:[
{id:1,title:"待办事项1",completed:false},
{id:2,title:"待办事项2",completed:false},
{id:3,title:"待办事项3",completed:false},
]
}
},
components:{
Todos:Todos
},
methods:{
handleDelete(id){
console.log('id :'+id);
this.todos = this.todos.filter(todo => todo.id != id);
}
}
}
</script>
<style>
*{margin: 0;padding: 0;box-sizing: border-box}
</style>