Question

我正在尝试将点击方法作为道具传递给我的组件的孩子的孩子。但是，如果该方法不采用任何参数，它似乎工作正常。但是，如果它需要参数，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>

这是我的小提琴 - 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)
}

什么都不返回。因此：

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

你可以bind该函数的参数two，如果这就是你打算使用它的方式，就像在这个fiddle中一样。

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

1 个答案: