Alpine.js如何绑定到名称中带有点的DOM事件

Question

使用Alpine.js version 2.7.3，组件可以使用x-on:[event].[modifiers]进行listen to DOM events。

但是使用什么语法来监听带有点的事件名称，比如bootstrap的show.bs.modal呢

在Vue.js中，这可以通过自定义指令(来自this question)来完成，但我认为在Alpine.js中不能创建自定义指令

Answer 1

这在目前是不可能的，因为Alpine.js使用点(.)来表示指令修饰符。

Answer 2

一种变通的方法是侦听文档上的自定义事件名称，然后使用Alpine.js可以处理的不同名称重新分派事件。

document.addEventListener('event.with.dots', function(evt, p1, ...) {
  // params and references to elements will depend on your requirement
  alpineComponentElement.dispatchEvent(new Event('eventwithnodots', {bubbles: true}))
})

<div x-data>
  <div x-on:eventwithnodots="$event"></div>
</div>