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

使用Alpine.js版本

2.7.3

，组件可以使用

x-on:[event].[modifiers]

但是，使用什么语法来侦听带有点的事件名称，比如bootstrap的

show.bs.modal

---

在Vue.js中，这可以通过自定义指令（从）完成，但我认为不能在Alpine.js中创建自定义指令，因为Alpine.js使用点（

）来表示指令修饰符。因为Alpine.js使用点（

），所以目前不可能表示指令修饰符。

另一种方法是侦听文档上的自定义事件名称，然后使用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}))
})

---

另一种方法是侦听文档上的自定义事件名称，然后使用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}))
})