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

Posted 2023-02-22

【中文标题】Vue：将多个@click传递给组件[重复]

【英文标题】：Vue: Passing multiple @click into components [duplicate]

【发布时间】：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>

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

【参考方案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>