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

IT技术 javascript vue.js
2021-03-13 17:13:09

问题:

如何在单个@click 中调用多个函数?(又名v-on:click)?

我试过

  • 用分号分割函数:<div @click="fn1('foo');fn2('bar')"> </div>;

  • 使用几种@click<div @click="fn1('foo')" @click="fn2('bar')"> </div>;

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

PS:当然我总是可以做到

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

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

但有时这并不好。

6个回答

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

<div v-on:click="firstFunction(); secondFunction();"></div>
// or
<div @click="firstFunction(); secondFunction();"></div>
方法是否保证按顺序执行?
2021-04-30 17:13:09

首先,您可以使用短符号@click代替v-on: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>

如果你想要一些更具可读性的东西,你可以试试这个:

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

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

也可以做@click="click1($event); click2($event)"。这里的要点是向处理程序函数添加显式事件参数。这样,每个方法都将获得相同的有效负载或原始事件数据。对于从子组件侦听自定义事件的情况很重要
2021-05-17 17:13:09

添加一个匿名函数来做到这一点可能是另一种选择:

<div v-on:click="return function() { fn1('foo');fn2('bar'); }()"> </div> 
ES6 替代方案:@click="() => { function1(parameters); function2(parameters); }"
2021-04-23 17:13:09
重要说明:如果您的嵌套函数之一需要$event作为参数,您需要将其作为参数传递给新函数以在其中使用。例如。($event) => {func1($event); func2('x');}
2021-04-26 17:13:09

分成小块。

排队:

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

或:通过复合函数:

<div @click="f3()"></div> 

<script>
var app = new Vue({
  // ...
  methods: {
    f3: function() { f1() + f2(); }
    f1: function() {},
    f2: function() {}
  }
})
</script>