javascript - Vue.js 组件中未定义方法

Question

我试图将 click 方法作为 prop 传递给我的组件的子组件。然而，如果该方法不带任何参数，它似乎工作得很好。但是，如果它需要参数，Vue.js 会向我发送一个 Invalid handler for event "click": got undefined 错误。

这是我的顶级组件:

  new Vue({
    el: '#app',
    created: function () {
    },
    methods: {
      action1: function () {
        console.log('--action 1--')
      },
      action2: function (word) {
        console.log('--action 2--', word)
      }
    }
  });

这是我的子组件:

  Vue.component('parent-component', {
    template: '#parent-component',
    data () {
      return {
        menuItems: [
          {
            label: 'Action 1',
            onClick : this.action1
          },
          {
            label: 'Action 2',
            onClick : this.action2('two')
          }
        ]
      }
    },
    props: ['action1', 'action2']
  });

  <template id="parent-component">
    <action-menu :actions="menuItems"></action-menu>
  </template>

这是我的最低级别组件:

  Vue.component('action-menu', {
    template: '#action-menu',
    props: ['actions'],
  });

<template id="action-menu">
  <div>
    <div v-for="action in actions">
      <button @click="action.onClick">{{ action.label }}</button>
    </div>
  </div>
</template>

这是我的 fiddle - http://jsfiddle.net/11sfg1p8/ - 请注意第一个按钮如何工作，但第二个按钮则不然，唯一的区别是第二个按钮需要一个参数。有人知道发生了什么事吗？

提前致谢!

Answer 1

在子组件内，menuItems 的第二个元素有一个 onClick 属性，该属性不是函数，而是函数的返回值。

仔细注意差异:

menuItems: [
      {
        label: 'Action 1',
        onClick : this.action1 // assigning a function
      },
      {
        label: 'Action 2',
        onClick : this.action2('two') // assigning a value
        // because of invocation of the function, 
        // which essentially returns undefined.
      }
    ]

undefined 被返回，因为该函数:

action2: function (word) {
  console.log('--action 2--', word)
}

什么也不返回。因此:

Invalid handler for event "click": got undefined

你可以bind函数的参数two(如果您打算像此 fiddle 一样使用它) .