是否可以使用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