【发布时间】:2017-09-12 07:30:26
【问题描述】:
我正在尝试将 click 方法作为道具传递给我组件的孩子的孩子。但是,如果该方法不带任何参数,它似乎工作正常。但是,如果它需要参数,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/ - 注意第一个按钮是如何工作的,但第二个按钮没有,唯一的区别是第二个按钮带有一个参数。有人知道发生了什么吗?
提前致谢!
【问题讨论】:
标签: javascript vue.js components