是否可以使用Vue.js触发事件？

Question

我刚刚开始使用Vue.js，并发现自己不断转向jQuery来帮助某些情况。 最近，我试图“触发”（或模仿）某个事件，例如点击或模糊事件，但未成功。

我知道在jQuery中你可以做到以下几点：

$('#my-selector').trigger('click');

但是如何使用Vue.js实现这一目标呢？ 我想尽可能地避免使用jQuery。

以下面的例子为例：

<div id="my-scope">
    <button type="button" v-on="click: myClickEvent">Click Me!</button>
</div>

<script>
new Vue({
    el: "#my-scope",
    data: {
        foo: "Hello World"
    },
    methods: {
        myClickEvent: function(e) {
            console.log(e.targetVM);
            alert(this.foo);
        },
        anotherRandomFunciton: function() {
            this.myClickEvent();
        }
    }
});
</script>

如果我要调用anotherRandomFunciton ，我希望它模拟（或触发）上面的click事件。 但是，我尝试这个事件（或上例中的e ）永远不会传递给函数。

Vue.js有实现这个目标的方法吗？

Answer 1

您需要使用v-el来获取对按钮的引用，如下所示：

<button type="button" @click="myClickEvent" v-el:my-btn>Click Me!</button>

然后，在您的方法中：

function anotherRandomFunction() {
    var elem = this.$els.myBtn
    elem.click()
}

它只是一个本机DOM点击事件。 请参阅v-el文档

或者从Vue 2.x开始：

<template>
    <button type="button" @click="myClickEvent" ref="myBtn">
        Click Me!
    </button>
</template>

<script>
export default {
    methods: {
        myClickEvent($event) {
            const elem = this.$refs.myBtn
            elem.click()
        }
    }
}
</script>

由于Vue仅使用和侦听本机DOM事件。 您可以使用Element#dispatchEvent触发本机DOM事件，如下所示：

var elem = this.$els.myBtn; // Element to fire on

var prevented = elem.dispatchEvent(new Event("change")); // Fire event

if (prevented) {} // A handler used event.preventDefault();

这不是完全理想或最佳实践。 理想情况下，您应该有一个处理内部的函数和一个调用该函数的事件处理程序。 这样，您可以随时调用内部。

Answer 2

如果有人偶然发现这个问题，我就是这样做的：

使用时this.$refs.myBtn.click()

我明白了

“Uncaught TypeError：this。$ refs.myBtn.click不是函数”

将其更改为： this.$refs.myBtn.$el.click()

要明确：需要添加“ $el ”才能使其正常工作。

Answer 3

Vue公司是由它的性质狭隘的-其意图是像jQuery其他包（编辑：jQuery的比DOM操作等功能），要与它使用。 我认为使用jQuery的trigger就好了。

但是，如果您想在没有jQuery的情况下创建自己的事件，请查看dispatchEvent ：

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent

或者，对于click的特定情况，您可以使用DOM元素的方法：

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click