Question

我有一个带有$ emit事件的Vue组件。我想有一个方法来接收回调（带有来自$ 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中接收额外的参数以及数据？

非常感谢您的输入！

注意：我意识到我可以通过$ emit数据传递callbackKey，但是让方法返回一个函数的方法似乎应该可以工作，所以我很好奇为什么它不起作用，以及我的误会。

Answer 1

v-on指令采用方法名称或inline handler。内联处理程序的返回值未使用，并且返回函数将不会设置新的事件处理程序。您的内联处理程序使用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>

Vue-如何将其他参数传递给回调方法

1 个答案: