Vue：将多个@click传递给组件[重复]答案

【问题标题】：Vue: Passing multiple @click into components [duplicate]Vue：将多个@click传递给组件[重复]
【发布时间】：2019-08-06 22:21:53
【问题描述】：

我有一个刀片视图模板，我将其传递给父函数，如下所示：

<Flash 
    :flash-status="flashStatus" 
    :flash-content="flashContent"
    v-if="flashStatus === true"
    @click="hideFlashMsg">

</Flash>

但现在我需要传入另一个函数并尝试了这个，但它不起作用：

<Flash 
    :flash-status="flashStatus" 
    :flash-content="flashContent"
    v-if="flashStatus === true"
    @click="hideFlashMsg"
    @click="addNums">

</Flash>

如何为同一个事件设置两个事件监听器？

【问题讨论】：

标签： laravel vue.js vuejs2

【解决方案1】：

你可以像这样调用多个点击函数：

@click="hideFlashMsg(); addNums();"

或者，让一个函数处理多个其他函数。

clickhandler(){
    this.function1();
    this.function2();
}

【讨论】：

【解决方案2】：

v-on 指令可以接受一个为同一事件设置多个侦听器的对象：

{
  EVENTNAME: [HANDLER_1, HANDLER_2, ... HANDLER_N]
}

所以你可以这样做：

<Flash v=on"{ click: [hideFlashMsg, addNums] }" />

new Vue({
  el: '#app',
  methods: {
    hideFlashMsg() {
      console.log('hideFlashMsg')
    },
    addNums() {
      console.log('addNums')
    }
  }
})

<script src="https://unpkg.com/vue@2.6.9"></script>

<div id="app">
  <button v-on="{click: [hideFlashMsg, addNums]}">Click</button>
</div>

【讨论】：