如何在.map中正确使用aframe-react事件？点击事件异常触发求助

兄弟，我一眼就看出问题所在啦——你大概率是在绑定点击事件的时候直接调用了函数（加了括号），而不是把函数本身传给事件处理器！

举个例子，如果你写的是：

<img @click="handleImageClick()" :src="imgUrl" alt="可点击图片">

这种写法会在组件初始化的时候就立刻执行handleImageClick()，而不是等到用户点击图片才触发。

正确的写法应该是这样： #

去掉函数后面的括号，把函数的引用传给click事件：

<img @click="handleImageClick" :src="imgUrl" alt="可点击图片">

这样只有当用户点击图片时，才会触发对应的函数。

如果需要传参数怎么办？ #

要是你需要给点击事件传递参数（比如图片的ID或者URL），可以用箭头函数来包裹：

<img @click="() => handleImageClick(imgId)" :src="imgUrl" alt="可点击图片">

或者把事件对象和参数一起传：

<img @click="(e) => handleImageClick(e, imgId)" :src="imgUrl" alt="可点击图片">

这样既可以传递参数，又不会在组件初始化时自动执行函数。

简单总结一下：Vue的事件绑定中，直接写函数名是传递引用（点击时执行），加括号就是立即执行函数，这就是你的点击事件自动触发的核心原因～

内容的提问来源于stack exchange，提问作者Munkhtegsh.M Munkhbat