vue给div添加自定义的v-on事件,非组件

vue通常都是在父子组件中,v-on和emit配对使用,我们都知道v-on:click是可以直接使用的.如下:
<div @click="getNumber"></div>
那如果,我想加个@left事件(如下),按键盘的左箭头的时候打印一个随机数,需要怎么做呢?

<div ref="left" @left="getNumber">left</div>
methods: {
    getNumber() {
      console.log(Math.random());
    }
}

思路分析:
首先我们了解下如何自定义事件,以及触发自定义事件.一个小例子说明

document.addEventListener('left', function(event) {
  console.log(event);
})

document.onkeydown = (e) => {
  const keyCode = window.event ? (window.event as any).keyCode : e.which;
  if(keyCode === 37) {
    document.dispatchEvent(new CustomEvent('left', {detail: {a:1}}));
  }
}

说明:上面代码为document绑定了一个left事件了,按键盘左箭头的时候触发这个事件,并且打印CustomEvent信息
 

好了现在我们回到主题,在vue中自定义left事件,首先我们要知道的是,在vue中,在div上添加自定义的@left,vue会自动绑定到当前的el上,即el.addEventListener('left',...),我们所需要做的就是触发这个事件就行,代码如下

<div ref="left" @left="getNumber">left</div>

created() {
    document.onkeydown = (e) => {
      const keyCode = window.event ? (window.event as any).keyCode : e.which;
      if(keyCode === 37) {
          this.$refs.left.dispatchEvent(new CustomEvent('left'));
      }
    }
},
methods: {
    getNumber() {
        console.log(Math.random());
    }
}

此时在浏览器中按左箭头建就可以打印出随机数啦