MyTop与MyFooter与App之间传递数据涉及到的就是子给父传递数据,MyList和MyItem与App涉及到爷孙传递数据。
之前的MyTop是使用props接收App传值,然后再在methods里面调用,现在使用自定义事件来处理子组件和父组件之间传递数据。
图是之前的props接收传值方式
在App的MyTop组件中使用自定义事件
<MyTop @addTodo="addTodo"/>
给MyTop组件定义一个自定义事件addTodo,事件的回调也是addTodo,可以重名不冲突。
在MyTop中取消props接收传值,也不用调用addTodo。
emits用于声明由组件触发的自定义事件。
this.$emit('addTodo',todoObj)
this.$emit(‘addTodo’,todoObj) 被调用,addTodo相应的验证函数将接受参数todoObj。
MyFooter中的todos是数据,不可以作为自定义事件(因为不是函数,只有函数才可以是自定义事件)
App,MyFooter中的方法同上操作
<MyFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/>
文章涉及到的TodoList案例可以参考之前的文章
ToDoList待办事件(Vue实现)详解