Question

我有一个刀刃视图模板，可以像这样通过父函数传递

<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>

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

Answer 1

您可以像这样调用多个点击功能：

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

或者，让一个功能处理多个其他功能。

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

Answer 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>

Vue：将多个@click传递给组件

2 个答案: