vue组件上如何监听原生事件

例如如下的一个组件,我想监听点击事件

<some-component @click="handleClick"></some-component>

但是这样做的话,并不能触发click事件。

在vue中提供了一个$listeners属性,可以获取到组件上的所有事件监听,所以需要进行一些如下处理

<template>
  <div v-on="eventListeners">
    <!--some code here-->
  </div>
</template>
<script>
export default {
  computed: {
    eventListeners() {
      return Object.assign({}, this.$listeners);
    },
  },
};
</script>

这里使用计算属性,将父级的所有事件监听传递到当前的组件中,在当前组件完成监听,这样使用起来就和在父组件上监听事件没什么区别了。

如果您觉得本文对您有用,欢迎捐赠或留言~
微信支付
支付宝

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注