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

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。我知道有一些方法可以绑定(bind)数据以使模板实例独一无二，但似乎无法获得它。绝对看不到 $broadcast 解决方案中的@click

感谢您的帮助!

Answer 1

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

或

• <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