Alpine JS $dispatch-ed 属性

Question

我正在做一个项目并对 Alpine JS $dispatch 感到好奇。我想知道代码示例 1 和 2 是否相同？如果不是，我该如何用原生 Javascript 编写 Alpine JS 提供的 $dispatch 'magic' 属性？

代码示例 1（使用 Alpine JS）

quill.on('text-change', function () {
  $dispatch('input', quill.root.innerHTML);
});

代码示例 2 (JavaScript)

quill.on('text-change', function () {
  let quillData = quill.root.innerHTML;
  let customEvent = new Event('input', {data:quillData});
  container.dispatchEvent(customEvent);
});

Answer 1

Alpine.js $dispatch 函数使用 CustomEvent 而不是 Event 在这里查看 https://github.com/alpinejs/alpine/blob/master/src/component.js#L355

所以你的原版 JS 示例需要是：

quill.on('text-change', function () {
  let quillData = quill.root.innerHTML;
  let customEvent = new CustomEvent('input', {detail:quillData});
  container.dispatchEvent(customEvent);
});