Vue - как передать дополнительный параметр в метод обратного вызова

Question

У меня есть компонент Vue с событием $ emit.Я хотел бы иметь метод, который получает обратный вызов (с данными из $ emit), но также принимает другой параметр.Я думаю, что метод, возвращающий функцию, достиг бы этого, но я не могу заставить ее работать.

<my-component @callback="notifyCallback" />

Я могу легко получить данные из $ emit следующим образом:

methods: {
  notifyCallback(data) {
    console.log(data)
  }
}

Но я хотел бы использовать один и тот же метод обратного вызова для нескольких событий $ emit с разными именами, в то же время получая данные, отправленные из $ emit.Я думаю, что метод, возвращающий функцию, сделает свое дело.Примерно так:

<my-component 
  @callback-a="notifyCallback('callback-a')"
  @callback-b="notifyCallback('callback-b')"
/>

methods: {
  notifyCallback(callbackKey) {
    return function(data) {
      console.log(`Callback: ${callbackKey} has data: ${data}`)
    }
  }
}

Но такой подход, когда метод возвращает функцию, похоже, не работает.

Не думаю ли я об этом неправильно?Есть ли способ сделать так, чтобы метод возвращал функцию?

Или, точнее, к моей желаемой цели ... есть ли способ, чтобы метод обратного вызова получил дополнительный параметр вместе с данными в $ emit?

Большое спасибо за ваш ввод!

Примечание: я понимаю, что мог бы передать callbackKey с данными $ emit, но подход с использованием метода, возвращающего функцию, выглядит такдолжен работать, поэтому мне больше всего интересно, почему это не так, и что я неправильно понимаю.

Answer 1

Директива v-on принимает либо имя метода, либо встроенный обработчик .Возвращаемое значение встроенного обработчика не используется, и возврат функции не установит новый обработчик события.Ваш встроенный обработчик генерирует функцию с notifyCallback() и ничего с ней не делает.

Обратите внимание, что встроенный обработчик имеет специальную переменную ($event), которая содержит данные события из $emit().

Небольшая настройка исходного кода может достичь вашей цели, но она кажется неоптимальной для вашего варианта использования, так как она создает ненужный обратный вызов для каждого события:

<my-component 
  @callback-a="notifyCallback('callback-a')($event)"
  @callback-b="notifyCallback('callback-b')($event)"
/>

Vue.component('my-component', {
  template: `<div>
      <button @click="emitData('callback-a')">Event A</button>
      <button @click="emitData('callback-b')">Event B</button>
    </div>`,
  methods: {
    emitData(eventName) {
      this.$emit(eventName, {
        foo: `${eventName} 1`,
        bar: `${eventName} 2`,
      })
    }
  }  
});

new Vue({
  el: '#app',
  methods: {
    notifyCallback(callbackKey) {
      return function(data) {
        console.log(`Callback: ${callbackKey} has data: ${JSON.stringify(data)}`)
      }
    }
  }
})

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

<div id="app">
  <my-component 
    @callback-a="notifyCallback('callback-a')($event)"
    @callback-b="notifyCallback('callback-b')($event)"
  />
</div>

Более чистым решением может быть обработка события непосредственно в notifyCallback():

<my-component 
  @callback-a="notifyCallback('callback-a', $event)"
  @callback-b="notifyCallback('callback-b', $event)"
/>

methods: {
  notifyCallback(callbackKey, data) {
    console.log(`Callback: ${callbackKey} has data: ${data}`)
  }
}

Vue.component('my-component', {
  template: `<div>
      <button @click="emitData('callback-a')">Event A</button>
      <button @click="emitData('callback-b')">Event B</button>
    </div>`,
  methods: {
    emitData(eventName) {
      this.$emit(eventName, {
        foo: `${eventName} 1`,
        bar: `${eventName} 2`,
      })
    }
  }  
});

new Vue({
  el: '#app',
  methods: {
    notifyCallback(callbackKey, data) {
      console.log(`Callback: ${callbackKey} has data: ${JSON.stringify(data)}`)
    }
  }
})

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

<div id="app">
  <my-component 
    @callback-a="notifyCallback('callback-a', $event)"
    @callback-b="notifyCallback('callback-b', $event)"
  />
</div>