将todolist案例中的子给父传递的事件,全部变成自定义事件
APP的子由footer header
父组件上
<!-- 自定义事件receive,里面的回调函数“receive” -->
<myHeader @receive="receive" />
子组件
add() {
//去掉前后空格
if (!this.title.trim()) return alert('输入无效')
//将用户的输入变成用户的todo对象
// uuid生成全球唯一 id title:e.target.value,
const todoObj = { id: nanoid(), title: this.title, done: false }
this.$emit('receive',todoObj)
// e.target.value=''//清空
this.title = ''
}
![](https://i-blog.csdnimg.cn/blog_migrate/6ef7a73678042b3f56b76803348ab930.png)
什么组件触发,事件名,传递的参数
<myFooter :todos="todos" @checkAllTodo="checkAllTodo"
@clearAllTodo="clearAllTodo"/>
子:
isAll: {
get() {
return this.doneTotal === this.total && this.total
},
set(value) {
//对数据进行才这样
this.$emit("checkAllTodo",value)
}
methods: {
// checkAll(e) {
// //对数据进行才这样
// this.$emit("checkAllTodo",e.target.checked)
// },
clear() {
if (confirm('确定删除吗')) {
//通知app删除
this.$emit("clearAllTodo")
}
}
},