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

Question

我刚开始使用 Vue.js，发现自己在某些情况下不断求助于 jQuery。最近我尝试 "trigger"（或模拟）一个事件，例如点击或模糊事件，但没有成功。

我知道在 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，我希望它能够模拟（或触发）上述点击事件。但是，我尝试此事件（或上例中的 e）永远不会传递给函数。

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

Answer 1

Vue 本质上是狭隘的——它的目的是像 jQuery 等其他包（编辑：对于 jQuery 特性 other 而不是 DOM 操作）与它一起使用。我认为使用 jQuery 的 trigger 就可以了。

但是，如果您想在没有 jQuery 的情况下创建自己的活动，请查看 dispatchEvent:

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

或者，对于点击的特殊情况，可以使用 DOM 个元素的方法：

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

Answer 2

您需要使用 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 Documentation

或者自 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 3

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

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

我明白了

“Uncaught TypeError: this.$refs.myBtn.click is not a function”

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

要清楚：“$el”需要添加才能工作。

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

Is it possible to trigger events using Vue.js?

javascript

jquery

vue.js