Vue.js：在 v-on:event 或 @event 中带有参数的匿名函数

Posted 2023-02-22

【中文标题】Vue.js：在 v-on:event 或 @event 中带有参数的匿名函数

【英文标题】：Vue.js: anonymous function with parameter in v-on:event or @event

【发布时间】：2018-02-16 11:39:41

【问题描述】：

我想在子组件发出事件后执行一个简单的函数。问题是子组件发出了我需要作为函数参数的数据。

如何在组件中注入参数并在一行中运行函数？

<div v-on:posted="runTask"> </div> 

或者

<div @posted="runTask"> </div> 

重要提示：我希望它适合模板（v-on:event 或 @event），因为我想将组件保留在 php 刀片模板中。

【参考方案1】：

对于带参数的匿名函数，使用：

<div v-on:click="return function(data)  console.log(data); "> </div> 

或者更简洁的 ES6：

<div v-on:click="(data) =>  console.log(data); "> </div> 

注意：您可以使用任何变量名来代替data。 Vue.js 会将事件发出的数据注入到该变量名中。

【讨论】：

这真的很有帮助。我知道 react 可以做到这一点。不知道 Vue 也可以。谢谢！

如何访问数据变量中的事件？