AlpineJS更新外部组件数据

最近在使用AlpineJS时遇到了一个问题。页面有两个不同的AlpineJS组件，其中一个组件需要更新另外一个组件内部的数据。当时想到的就是能不能拿到组件的实例，查看官方文档很可惜没有这样的方法提供。在查看$dispatch文档时发现了可以利用自定义事件派发来实现该功能。

自定义事件

在AlpineJS中，您现在可以向任何组件添加自定义事件，如下所示：

<div x-data="{ open: false }" @custom-open="open=true">
    <div @click="open=true">打开</div>
    <div x-show="open">点击了打开我才显示</div>
</div>

您在上面看到的@custom-open就是自义事件的使用语法。现在添加了一个名为 custom-open 的自定义事件。您可以在组件内部使用此自定义事件，如下所示：

<div x-data="{ open: false }" @custom-open="open=true">
    <div @click="$dispatch('custom-open')">打开</div>
    <div x-show="open">点击了打开我才显示</div>
</div>

上面是在组件内部接收事件派发的，我们今天的重点是外部组件接收事件派发。

分派到其他组件

熟悉javascript事件的都知道，事件都是委派传递(事件冒泡)的。官方文档有句说明。

Notice that, because of event bubbling, when you need to capture events dispatched from nodes that are under the same nesting hierarchy, you’ll need to use the .window modifier
请注意，由于事件冒泡，当您需要捕获从同一嵌套层次结构下的节点分派的事件时，您需要使用 .window 修饰符

将上面的示例更改后，为示例加上.window修饰符就可接收来自其它组件发出的事件。

<div x-data="{ open: false }" @custom-open.window="open=true">
    <div @click="$dispatch('custom-open')">打开</div>
    <div x-show="open">点击了打开我才显示</div>
</div>
<div x-data>
	<button @click="$dispatch('custom-open')">其它组件点击打开</button>
</div>

你也可以不使用AlpineJS提供的$dispatch来派发自定义事件，下面是使用原生javascript提供的事件派发。

<div id="component-1" x-data="{ open: false }" @custom-open.window="open=true">
    <div @click="$dispatch('custom-open')">打开</div>
    <div x-show="open">点击了打开我才显示</div>
</div>
<div>
	<button onclick="document.getElementById('component-1').dispatchEvent(new CustomEvent('custom-open', { detail: {}}));">其它组件点击打开</button>
</div>

正如代码所示，AlpineJS只是触发本机JavaScript自定义事件，它只是提供了许多此类功能的包装器，使其更易于使用。

总结

这就是在AlpineJS中从其它组件范围之外调用事件通知组件的基础知识。请务必访问AlpineJS官方文档以了解更多信息。 有什么其它问题您也可以给我留言或者发送邮件。