函数作为组件的道具问题

时间:2017-11-20 15:12:37

标签: vue.js vuejs2

我在我的应用程序中使用了一种按钮,其中一个示例如下:<button type="button" class="btn btn-default" @click.prevent="search">Search</button>。虽然代码字符的节省量很小,但是为我创建一个小组件Btn让我感到很值得。我可以这样使用它:<btn :action="search">Search</btn>。一切都很好。

但是当我想在函数中使用Vue的一个内部特殊变量作为参数时,我遇到了问题。例如,<btn :action="removeSelected(index,$event)">X</btn>。 'removeSelected'函数需要作为第二个参数传递给事件。但是,它在作为组件中的prop传递的函数中作为参数无效。我收到错误消息:“[Vue warn]:属性或方法”$ event“未在实例上定义,但在渲染期间引用。”这有什么办法吗?

1 个答案:

答案 0 :(得分:1)

这里的主要问题是您希望将函数传递给将接收$event参数(默认情况下所有事件处理程序都接收)的子组件,以及传递父项中定义的参数。为此,您可以在action参数本身内定义一个函数。

:action="($event) => removeSelected(index, $event)"

这定义了一个接收$event作为参数的函数,该参数使用捕获索引调用removeSelected方法并传递事件。

Working example