질문:

단일 @click에서 여러 함수를 호출하는 방법은 무엇입니까? (일명 v-on:click)?

나는 시도했다

• 세미콜론으로 함수 분할 : <div @click="fn1('foo');fn2('bar')"> </div>;

• 여러 가지 사용 @click: <div @click="fn1('foo')" @click="fn2('bar')"> </div>;

하지만 제대로하는 방법?

추신 : 확실히 나는 항상 할 수 있습니다

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

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

그러나 때때로 이것은 좋지 않습니다.

Vue 2.3 이상에서는 다음을 수행 할 수 있습니다.

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

먼저 짧은 표기법을 사용할 수 있습니다. @clickv-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와 같은 희망을 더 느낍니다.

anomymous 함수를 추가하려면 대안이 될 수 있습니다.

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

조각으로 분리하십시오.

인라인 :

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

OR : 복합 함수를 통해 :

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

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

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>

Vue이벤트 처리는 하나의 함수를 호출 할 수 있습니다. 여러 작업을 수행해야하는 경우 두 가지를 모두 포함하는 래퍼를 수행 할 수 있습니다.

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

편집하다

또 다른 옵션은 첫 번째 핸들러를 편집하여 콜백을 갖고 두 번째 핸들러를 전달하는 것입니다.

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

HTML :

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

JS :

var vm = new Vue({
  el: '#example',
  data: {
    name: 'Vue.js'
  },
  // define methods under the `methods` object
  methods: {
    multiple: function (event) {
      this.first()
      this.second()
    }
    first:  function (event) {
      //yourstuff
    }
    second: function (event) {
      //yourstuff
    }
  }
})

vm.multiple()

나는 또한 이것을 사용하여 여러 emits 또는 메서드를 호출하거나 둘 다 함께 분리하여 호출 할 수 있습니다. 세미콜론

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

그러나 다음과 같이 할 수 있습니다.

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

예, 네이티브 onclick html 이벤트를 사용합니다.