功能作为组件道具的问题答案

【问题标题】：Issue with functions as props for components功能作为组件道具的问题
【发布时间】：2017-11-20 15:12:36
【问题描述】：

我在整个应用程序中都使用了一种按钮，例如：<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 警告]：属性或方法“$event”未在实例上定义，但在渲染期间被引用。”有没有办法解决这个问题？

【问题讨论】：

这不起作用？ <btn @click="removeSelected(index)">X</btn>
嗯，是的，但是我在这里要做的是有一个在 Btn 组件中使用的动作道具，因此：@click.prevent="action"。不过，这可能是徒劳的，因为它实际上并没有捕捉到事件。
这是事件绑定语法：@click="hadler"，这只是属性绑定语法:attr="value"。
我知道。这就是我在我的 Btn 组件中所拥有的——“动作”是通过道具传入的函数。问题在于 $event 变量。
试试:action="($event) => removeSelected(index, $event)"。这里是an example。

标签： vue.js vuejs2

【解决方案1】：

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

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

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

Working example.

【讨论】：