是否可以使用 Vue.js 触发事件? [英] Is it possible to trigger events using 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 来获取对按钮的引用:
然后，在您的方法中:
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<触发原生 DOM 事件/code> 像这样:
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.
这篇关于是否可以使用 Vue.js 触发事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
