Vue:在下面的这个例子中,为什么需要将点击事件告诉父组件?原理是什么?

Question

Vue:在下面的这个例子中,为什么需要将点击事件告诉父组件?原理是什么?也可以用伪代码示例一下

Answer 1

这是两个组件, 就是button在一个组件,需要删除的东西在另一个组件. 你点击button后, 如果不做任何操作.那个组件是不知道你点击了button了.也当然不会执行删除操作了. 所以, 你在这个组件点击button后 , 需要手动emit告诉要执行操作的那个组件, 你此时点击button了. 然后那个组件进行响应. 完成删除操作.

结合vue cli 比较容易理解. 也就是单个的.vue文件. 这个教程的下一阶段应该是学习.vue文件单个组件. 到时候会比较容易理解了

Answer 2

父子组件交互就需要这样做。这个todolist例子中todo-item是一个子组件，子组件需要把事件以及对应数据传递给父组件就需要用到$emit方法，向外发射一个事件，原理类似发布订阅

Answer 3

目的是解耦，让父元素和子元素可以独立工作，将来可以最大限度复用父元素和子元素。

没什么原理，你截图的部分就是完整的工作流程。

Answer 4

来我来告诉你为什么，
其实很简单 vm实例上有一个_events数组，这个数组就是收集你在调用$emit时候的所有方法在你$emit的时候会去数组里面捞一下_events[event] 由于你的事件会在很多地方被$on 所以默认是个数组

上图是你用$on 注册响应时间的时候的实现，如何把方法放进events中