ToDoList使用自定义事件传值

MyTop与MyFooter与App之间传递数据涉及到的就是子给父传递数据,MyList和MyItem与App涉及到爷孙传递数据。

之前的MyTop是使用props接收App传值,然后再在methods里面调用,现在使用自定义事件来处理子组件和父组件之间传递数据。



图是之前的props接收传值方式

在这里插入图片描述




在App的MyTop组件中使用自定义事件

  

给MyTop组件定义一个自定义事件addTodo,事件的回调也是addTodo,可以重名不冲突。


在MyTop中取消props接收传值,也不用调用addTodo。


emits​用于声明由组件触发的自定义事件。

      this.$emit('addTodo',todoObj)

this.$emit(‘addTodo’,todoObj) 被调用,addTodo相应的验证函数将接受参数todoObj。

MyFooter中的todos是数据,不可以作为自定义事件(因为不是函数,只有函数才可以是自定义事件)

App,MyFooter中的方法同上操作

   

ToDoList使用自定义事件传值_第1张图片

ToDoList使用自定义事件传值_第2张图片

文章涉及到的TodoList案例可以参考之前的文章
ToDoList待办事件(Vue实现)详解

你可能感兴趣的:(学习,笔记,vue.js,前端)