Vue: передача нескольких @click в компоненты

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>