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

宝儿Pro2020-03-11

我刚刚开始使用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是否有实现此目的的方法？

番长蛋蛋Davaid2020/03/11 12:24:38

您需要使用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事件。您可以使用以下方式触发本机DOM事件Element#dispatchEvent：

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();

这并非完全理想或最佳做法。理想情况下，您应该具有一个处理内部函数的函数和一个调用该函数的事件处理程序。这样，您可以在需要时致电内部人员。

飞云Mandy2020/03/11 12:24:38

If someone stumbles upon this, this is how I did it:

When using this.$refs.myBtn.click()

I get