利用原生JS做组件通信---自定义事件

156 阅读 0 评论 103 点赞

我是靠谱客的博主羞涩冬天，这篇文章主要介绍利用原生JS做组件通信---自定义事件，现在分享给大家，希望可以做个参考。

最近遇到个场景，研究过后发现可以用原生js实现组件通信
如下例子：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
  <button class="mybtn">click me</button>
</body>
<script>
  let obtn = document.querySelector('.mybtn')

  
  //为btn元素注册事件（相当于组件接收数据的一方）
  obtn.addEventListener('btn-eve', (e) => { console.log(e.detail.msg) })
  
  //向btn派发一个事件，并以合适的顺序同步调用目标元素相关的事件处理函数，dispatchEvent就相当于主动触发注册的事件
   //dispatchEvent()是 create-init-dispatch 过程的最后一步
   //（相当于组件通信数据源）
  obtn.dispatchEvent(new CustomEvent('btn-eve', { detail: { msg: 'you have clicked me' } }))
</script>

构造方法 CustomerEvent() 创建一个新的 CustomEvent 对象。

在第二个参数（对象）中，我们可以为我们想要与事件一起传递的任何自定义信息添加一个附加的属性 detail。

总结：dispatchEvent+ CustomEvent（）可以完成数据派发，可以利用在组件通信。目前还没发现这种方法的问题，欢迎各位指正交流。

另外注意：一个事件是在另一个事件中发起的。例如使用 dispatchEvent。这类事件将会被立即处理，即在新的事件处理程序被调用之后，恢复到当前的事件处理程序。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<button id="menu">Menu (click me)</button>

<script>
  menu.onclick = function() {
    alert(1);

    menu.dispatchEvent(new CustomEvent("menu-open", {
      bubbles: true
    }));

    alert(2);
  };

  // 在 1 和 2 之间触发
  document.addEventListener('menu-open', () => alert('nested'));
</script>