Javascript 如何在vue中使用@click调用多个函数？

问题:

如何在一次@click中调用多个函数？（又名

v-on:click

）

我试过了

• 用分号拆分函数：

• 使用多个

  @单击
  ：
  

但如何正确地做到这一点呢

附言：当然我总能做到

<div v-on:click="fn3('foo', 'bar')"> </div>

function fn3 (args) { 
  fn1(args);
  fn2(args);
}

函数fn3（args）{
fn1（args）；
fn2（args）；
}

---

但有时这并不好。

Vue事件处理只允许单个函数调用。如果需要执行多个操作，则可以执行包含以下两个操作的包装：

<div @click="handler"></div>
////////////////////////////
handler: function() { //Syntax assuming its in the 'methods' option of Vue instance
    fn1('foo');
    fn2('bar');
}

////////////////////////////
handler:function（）{//语法假定其位于Vue实例的“methods”选项中
fn1（“foo”）；
fn2（“酒吧”）；
}

编辑

另一个选项是编辑第一个处理程序，使其具有回调并传入第二个处理程序

<div @click="fn1('foo', fn2)"></div>
////////////////////////////////////
fn1: function(value, callback) {
    console.log(value);
    callback('bar');
},
fn2: function(value) {
    console.log(value);
}

////////////////////////////////////
fn1：函数（值，回调）{
console.log（值）；
回调（“条”）；
},
fn2：功能（值）{
console.log（值）；
}

Html：

<div id="example">
  <button v-on:click="multiple">Multiple</button>
</div>

---

首先，为了便于阅读，您可以使用简短的符号

@click

，而不是

v-on:click

其次，您可以使用click事件处理程序调用其他函数/方法，如上面@Tushar的评论中所述，因此您最终会得到如下结果：

<div id="app">
   <div @click="handler('foo','bar')">
       Hi, click me!
   </div>
</div>

<!-- link to vue.js !--> 
<script src="vue.js"></script>

<script>
   (function(){
        var vm = new Vue({
            el:'#app',
            methods:{
                method1:function(arg){
                    console.log('method1: ',arg);
                },
                method2:function(arg){
                    console.log('method2: ',arg);
                },
                handler:function(arg1,arg2){
                    this.method1(arg1);
                    this.method2(arg2);
                }
            }
        })
    }()); 
</script>

嗨，点击我！
（功能（）{
var vm=新的Vue({
el:“#应用程序”，
方法：{
方法1：函数（arg）{
log（'method1:'，arg）；
},
方法2：函数（arg）{
log（'method2:'，arg）；
},
处理程序：函数（arg1、arg2）{
方法1（arg1）；
方法2（arg2）；
}
}
})
}()); 

要添加一个匿名函数来执行此操作，可以选择：

<div v-on:click="return function() { fn1('foo');fn2('bar'); }()"> </div> 

分成几部分。 内联：

或：通过复合函数：

var app=新的Vue({
// ...
方法：{
f3:函数（）{f1（）+f2（）；}
f1:函数（）{}，
f2：函数（）{}
}
})

在Vue 2.3及更高版本上，您可以执行以下操作：

<div v-on:click="firstFunction(); secondFunction();"></div>
// or
<div @click="firstFunction(); secondFunction();"></div>

//或

但是，您可以这样做：

<div onclick="return function()
              {console.log('yaay, another onclick event!')}()" 
              @click="defaultFunction"></div>

是的，通过使用本机onclick html事件。

这是一种简单的方法

---

v-on:click=“firstFunction（）；secondFunction（）；”

当您需要通过单击对话框内的按钮打开另一个对话框并关闭此对话框时，此功能对我有效。使用逗号分隔符将值作为参数传递

<v-btn absolute fab small slot="activator" top right color="primary" @click="(addTime = true),(ticketExpenseList = false)"><v-icon>add</v-icon></v-btn>

添加
用于按钮工作的Vue 2.5.1中的

 <button @click="firstFunction(); secondFunction();">Ok</button>

Ok

如果您想要更具可读性的内容，可以尝试以下方法：

<button @click="[click1($event), click2($event)]">
  Multiple
</button>

倍数

---

对我来说，这个解决方案感觉更像Vue，希望你喜欢

我要补充的是，你也可以使用它来调用多个emit或方法，或者通过使用；分号

  @click="method1(); $emit('emit1'); $emit('emit2');"

您可以使用以下选项：

<div @click="f1(), f2()"></div> 

你可以像这样做

<button v-on:click="Function1(); Function2();"></button>

或

创建一个单击处理程序并在该调用中调用两个函数。添加一个异常函数来完成此操作：ES6替代方法：@click=“（）=>{function1（参数）；function2（参数）；}”重要注意：如果一个嵌套函数需要

$event

作为参数，您需要将其作为参数传递给新函数，以便在其中使用。例如，

（$event）=>{func1（$event）；func2（'x'）；}

我相信这会破坏编译器而不会渲染。刚试过-坏了。我可以在下面看到它对一些人有效，但对我来说在2.6.6中坏了。也可以做@click=“click1（$event）；click2（$event）”。这里的要点是向处理程序函数添加显式事件参数。这样，每个方法将获得相同的负载或原始事件数据。对于从子组件侦听自定义事件的情况很重要

<button v-on:click="Function1(); Function2();"></button>

<button @click="Function1(); Function2();"></button>