Alpine JS $dispatch-ed 属性

Question

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

代码示例 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

因此您的 vanilla JS 示例需要是：

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

Alpine JS $dispatch-ed 属性

Alpine JS $dispatch-ed properties

alpine.js