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

本文介绍了是否可以使用 Vue.js 触发事件?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我刚刚开始使用 Vue.js 并且发现自己在某些情况下不断地求助于 jQuery.最近，我尝试触发"(或模拟)一个事件，例如点击或模糊事件，但未成功.

我知道在 jQuery 中您可以执行以下操作:

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

但是如何使用 Vue.js 实现这一点?我想尽可能地停止使用 jQuery.

以下面的例子为例:

<button type="button" v-on="click: myClickEvent">点击我！</button>

<脚本>新的 Vue({el: "#my-scope",数据: {foo: "你好世界"},方法: {myClickEvent:函数(e){控制台日志(e.targetVM)；警报(this.foo)；},另一个随机函数:函数(){this.myClickEvent();}}});

如果我要调用 anotherRandomFunciton，我希望它模拟(或触发)上述点击事件.但是，我尝试将事件(或上面示例中的 e)传递给函数.

Vue.js 有没有实现这个的方法?

解决方案

您需要像这样使用 v-el 来获取对按钮的引用:

​​点击我！</button>

然后，在您的方法中:

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

这只是一个原生 DOM 点击事件.参见 v-el 文档

或者从 Vue 2.x 开始:

<button type="button" @click="myClickEvent" ref="myBtn">点我！<脚本>导出默认{方法: {myClickEvent($event) {const elem = this.$refs.myBtnelem.click()}}}

由于 Vue 仅使用和侦听本机 DOM 事件.您可以使用 Element#dispatchEvent 像这样:

var elem = this.$els.myBtn;//要触发的元素var 阻止 = elem.dispatchEvent(new Event("change"));//火灾事件if (prevented) {}//使用的处理程序 event.preventDefault();

这不是完全理想的或最佳实践.理想情况下，您应该有一个处理内部结构的函数和一个调用该函数的事件处理程序.这样，您就可以在需要时调用内部组件.

I have just started using Vue.js and find myself continuously turning to jQuery to help in certain situations. Most recently I have attempted to, unsuccessfully "trigger" (or emulate) an event, such as an on click or blur event.

I know in jQuery you can do the following:

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

But how can this be acheived using Vue.js? I am wanting to move away from using jQuery as much as possible.

Take the below as an example:

<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>

If I was to call anotherRandomFunciton, I would like it to emulate (or trigger) the above click event. However, I attempt this the event (or e in the above example) never gets passed to the function.

Does Vue.js have a method for achieving this?

解决方案

You need to get a reference to your button by using v-el like so:

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

Then, in your method:

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

It's just a native DOM click event. See v-el Documentation

Or since 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>

Since Vue uses and listens for native DOM events only. You can trigger native DOM events using the Element#dispatchEvent like so:

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

This is not exactly ideal or best practice. Ideally, you should have a function that handles the internals and an event handler that calls that function. That way, you can call the internals whenever you need to.