Question

我有一个带有几个div的模板，每个div包含一个触发特定功能和相应视觉效果的@click

<template>
    <div @click="function doThis(param1)></div>
    <div @click="function doThis(param2)></div>
    <div @click="function doThis(param3)></div>
    <div @click="function doThis(param4)></div>
    <div @click="function doThis(param5)></div>
</template>

method: {
    doThis(param) {
        lightUpDiv(corresponding param)
    }
}

我也通过$ broadcast从父母那里调用doThis。如果有的话，是从$ broadcast触发相应的lightUpDiv调用的最佳Vueish方式？（只需使用getElementById和.click（）???）。我使用单独的div与v-for，希望这更容易。

我应该注意到页面上有几个模板实例。即使在所有模板上同时引起相同的视觉效果也很好。如果有办法在特定模板实例上调用它们甚至更好。

我花了好几个小时试图解决这个问题，似乎无法做到这一点。已阅读所有指南和API。我知道有一些方法来绑定数据，使模板实例独一无二，但似乎无法得到它。绝对无法从$ broadcast解决方案中看到@click

感谢您的帮助!!

Answer 1

<div @click="doThis"></div>

OR

<div @click="doThis($event)"></div>

两者在功能上是等价的，但建议使用第二个版本，因为它更明确。

在javascript中，

doThis: function(ev){
  //ev is event object and ev.target refers to the div you need.
  alert(ev.target.innerHTML);

}

Demo

Event object details

Vue.js：从父组件中触发子组件的@click

1 个答案: