1.利用dispatchEvent给元素绑定自定义事件

dom.dispatchEvent(new Event('自定义事件名字'))
dom.addEventListener('自定义事件名字',()=>{})

<div id="box"></div>
<button onclick="btnClicked()">按钮</button>  

1.1 不用传参可以这么写

 function btnClicked(){
  //点击按钮 触发div的自定义事件
   document.querySelector('#box').dispatchEvent(new Event('aaa'));
 }
//利用addEventListener给div绑定自定义事件
document.querySelector('#box').addEventListener('aaa',function(){
    console.log('触发了自定义事件aaa')
})

1.2 如果需要传参可以使用CustomEvent实现

new CustomEvent(eventname, options)

//参数options：
{
  detail: {  },//键名必须是detail
  bubbles: true,    //是否冒泡
  cancelable: false //是否取消默认事件
}

 function btnClicked(){
    //触发自定义事件，并且传参
      var event = new CustomEvent("aaa", {"detail":{"username":123}});
      document.querySelector('#box').dispatchEvent(event);
}
//监听自定义事件，并且通过e.detail获取参数
document.querySelector('#box').addEventListener('aaa',function(e){
    console.log(e.detail) //{"username":123}
})

2.vue利用EventBus实现自定义事件

<div id="box"></div>
<button @click="btnClicked">按钮</button>

import Vue from "vue";
const EventBus = new Vue();
mounted() {
    //页面加载完绑定自定义事件
    EventBus.$on("aaa", (e) => {
      console.log(e)//{username:123}
    });
  },
  methods: {
    //点击按钮触发自定义事件
    btnClicked() {
      EventBus.$emit("aaa",{username:123});
    },
  },