当react或vjs中的组件之间进行通信时,使用回调和使用事件有什么不同?

when communicate between component in react or vuejs, what's the different between using callback and event

本文关键字:回调 事件 什么 vjs react 组件 通信 之间      更新时间:2023-09-26

正如标题所说,我对react或vuejs中父子组件之间的通信感到困惑。

组件之间有两种不同的通信方式。

  • 首先,我们可以把一个方法作为道具传递给子组件,然后子组件可以通过这个方法与父组件通信;第二,我们也可以在子组件中调度一个事件,父组件可以监听这个事件,然后做一些事情。

我的困惑是有什么不同。什么时候应该使用方法,什么时候应该使用事件?

prop通常不是一个方法,而是一个代表程序状态的数据项。尽管子进程可以(使用.sync)修改一个道具并将该更改向上传播到父进程,但最常见的情况是,子进程只是从父进程接收道具并反映来自父进程的更新

事件是表示发生某事的一种方式,比如用户点击了一个按钮。组件调度一个事件,以便父组件(或任何其他组件)可以对状态进行更改(这些更改将通过props向下传播)。

通常的规则是props归子节点,event归父节点。

区别主要在语义上。

当你像这样从父进程中监听子进程中的事件时: <child @child-event="callbackMethod">

内部发生的事情基本上与通过prop传递回调相同:callbackMethod将在子进程内部注册为回调,当我们$emit事件child-event时执行。

所以在我看来,优势在于它的明确性:

  • 当我在子线程中发出事件时,任何阅读我代码的人都可以立即清楚地知道我想要与外部通信。
  • 另一方面,当我在子模板中执行回调时,读者必须意识到这个函数不是子模板的内部method,而是来自父模板的prop,因此是一个回调,将在父模板的作用域中执行。
  • 父模板也是如此:通过查看模板,我可以立即看到:a-prop="data"镇传递了什么,以及当子模板发出事件时将执行哪些回调:@some-event=callback"
  • 在一个回调的道具,我必须依靠良好的道具命名来沟通,这不是"数据下来",但回调得到一些东西"备份"。