Javascript 组件中未定义Vue.js方法

我正在尝试将单击方法作为道具传递给组件的子级。但是，如果该方法不采用任何参数，它似乎可以正常工作。但是，如果它接受参数，Vue.js会向我发送一个

无效的事件“click”：get 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>

以下是我的子组件：

  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>

Vue.component（'parent-component'）{
模板：“#父组件”，
数据（）{
返回{
菜单项：[
{
标签：“行动1”，
onClick:this.action1
},
{
标签：“行动2”，
onClick:this.action2（'two'））
}
]
}
},
道具：['action1'，'action2']
});
-请注意第一个按钮是如何工作的，但是第二个按钮没有，唯一的区别是第二个按钮接受一个参数。有人知道发生了什么吗

提前谢谢
 在子组件中，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.
      }
    ]

返回未定义的

，因为函数：

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

不返回任何内容。 因此：

事件“click”的处理程序无效：未定义

---

你可以将参数

two

添加到函数中，如果你打算这样使用它的话。

很确定你的意思是

this.action2.bind（null，'two'）

在那把小提琴中（或者你想要的任何

this

）@BertEvans哦，对不起，

this.action2.bind（this，'two'））

可能是一个更好的选择吗？

bind

的第一个参数是

这个

将在绑定函数中。你说的是

这个

应该是

两个

。这取决于需要什么

这个

（你希望

这个

引用什么）。如果函数中不使用

这个

，那么

绑定（null，…）

是可以接受的。请参阅您链接的MDN文档中的“部分应用的函数”部分。