vue怎么添加自定义事件？

Question

<img :src="list.src" @click="switchDo"/>

1.如同上面代码的点击事件一样，但是有时候需求并不是点击事件，比如‘左滑动’，‘右滑动’，‘点击三次’，‘长按’这种自定义的事件怎么添加，怎么写？

2.能不能就是像下面这样调用自定义事件？

//比如，threeClick是自己添加的自定义事件。
<img :src="list.src" @threeClick="switchDo"/>

Answer 1

1.最近正在学习 RxJS，你所说的这些自定义事件可以尝试使用 RxJS 来实现：三连击示例 https://jsfiddle.net/KingMari...

2.标准 HTML 元素的话，还要结合 https://developer.mozilla.org... 来实现：Vue 绑定三连击示例 https://jsfiddle.net/KingMari...。如果是自定义组件，那么用 $emit 即可。

Answer 2

可以这么写，但是前提是 其它地方 已经 emit了一个你定义的事件，

this.$emit("dropdown","a")

<img :src="list.src" @dropdown="dropdownClick"/>

methods:{
        dropdownClick: function (a) {
                ...
            },
}

Answer 3

还是具体问题具体分析吧，比如滑动，都是通过 touch 事件组合出来的，所以你的需求应该自己在 handler 里处理。

$emit() 是触发自定义事件的。

Answer 4

谢邀。看了一下最高票的答案完全是在乱写，先踩为敬。

如果题主是想绑定自定义 DOM 事件，Vue 是支持 DOM 自定义事件的，至少使用 render 函数的时候是支持，没有测试使用 template compiler，不过推测应该也可以支持。另外在使用的过程中应该要注意一下事件名大小写的问题，由于 html attr name 不区分大小写，所以自定义的事件名应该尽量采用全部小写或者短线的形式，而避免采用驼峰形式。

如果题主只是想实现自定义的功能而不是特指绑定 DOM 事件，推荐使用组件封装来解决问题，上面的答案已经降到就不再赘述了。

Answer 5

自定义事件一般用于自定义组件的，img标签很显然不具备你需要的这些事件，解决方案是封装为一个自定义组件，实现并开放这几个自定义事件。

Vue.component('custom-img', {
  template: '<img :src="src" @touchmove="ontouchmove" />',
  props: {
    src: String
  },
  methods: {
    ontouchmove: function (e) {
      // if (...) 实现判断slideLeft的逻辑
      {
        this.$emit('slideLeft');
      }
    }
  }
});

调用之处：

<custom-img :src="list.src" @slide-left="onSlideLeft"></custom-img>

Answer 6

https://github.com/vuejs/vue/...