在 Angular 中，$emit 和 $broadcast 都是用于事件传递的机制。本文将详细介绍 $emit 和 $broadcast 的使用方法和区别，并提供示例代码以供学习和参考。
$emit
$emit 是 Angular 中的一个方法，用于向父级组件发送事件。具体来说，$emit 会向上遍历组件树，直到找到第一个能够处理该事件的组件。如果没有找到能够处理该事件的组件，则该事件不会被处理。
$emit 方法的使用方法如下：
------------------------- ------
其中，eventName 表示事件名称，data 表示传递的数据。在接收该事件的组件中，可以使用 $on 方法来监听该事件：
----------------------- --------------- ----- - -- ---- ---
在 $on 方法中，event 表示事件对象，data 表示传递的数据。
下面是一个使用 $emit 方法的示例：
-- ----
---------------------------------- ---------------- -
------------------------ --------------- ----- -
--------------------- ------- ------
---
---
-- ----
--------------------------------- ---------------- -
-------------------------- - ----- ------- ------- ---
---在上面的示例中，子级组件通过 $emit 方法向父级组件发送了一个名为 childEvent 的事件，并传递了一个包含文本数据的对象。父级组件通过 $on 方法监听该事件，并在接收到事件时打印出传递的数据。
$broadcast
$broadcast 是 Angular 中的另一个方法，用于向子级组件发送事件。具体来说，$broadcast 会向下遍历组件树，直到找到所有能够处理该事件的组件。如果没有找到能够处理该事件的组件，则该事件不会被处理。
$broadcast 方法的使用方法如下：
------------------------------ ------
其中，eventName 表示事件名称，data 表示传递的数据。在接收该事件的组件中，可以使用 $on 方法来监听该事件：
----------------------- --------------- ----- - -- ---- ---
在 $on 方法中，event 表示事件对象，data 表示传递的数据。
下面是一个使用 $broadcast 方法的示例：
-- ----
---------------------------------- ---------------- -
-------------------------------- - ----- ------- ------- ---
---
-- ----
--------------------------------- ---------------- -
------------------------- --------------- ----- -
--------------------- ------- ------
---
---在上面的示例中，父级组件通过 $broadcast 方法向子级组件发送了一个名为 parentEvent 的事件，并传递了一个包含文本数据的对象。子级组件通过 $on 方法监听该事件，并在接收到事件时打印出传递的数据。
区别
$emit 和 $broadcast 的区别在于事件的传递方向。$emit 是向上遍历组件树，向父级组件发送事件；$broadcast 是向下遍历组件树，向子级组件发送事件。
另外，$emit 和 $broadcast 的作用范围也不同。$emit 只会向上遍历组件树，直到找到第一个能够处理该事件的组件；$broadcast 则会向下遍历组件树，直到找到所有能够处理该事件的组件。因此，$broadcast 的作用范围更广，可能会影响到更多的组件。
总结
$emit 和 $broadcast 都是 Angular 中用于事件传递的机制，它们的使用方法和区别如上所述。在实际开发中，根据需要选择合适的方法来传递事件，可以提高代码的可维护性和可读性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/668fe93bdc1ed1a61b474afb