Quiero preguntar sobre el evento de clic en Vue. Tengo un lapso que contiene div y botón. Cuando hago clic en el botón (thisButton), funciona bien, pero el lapso (thisMask) no parece funcionar cuando se hace clic. También agrego el evento de emisión y cuando hago clic en este botón, también activa el evento de emisión thisMaskClicked. Pero el archivo console.log solo devuelve lo que tiene este botón. ¿Me he perdido algo?
<span class="this_mask" @click="thisMask"> <div class="this__wrap"> <div class="this__text"> <button class="this__button" @click="thisButton"></button> </div> </div> </span>esto.js
thisMask () { this.$emit('thisMaskClicked') console.log("This Mask Executed") }, thisButton() { this.$emit('thisButtonClicked') console.log("This Button Clicked") }Lo que estás buscando es el self modificador.
Si un nodo principal y un nodo secundario están registrados con el mismo tipo de evento, cuando se envía ese tipo de evento, se llama a los controladores de padre e hijo.
Aquí hay un violín de ejemplo
Tu código debería verse así:
<span class="this_mask" @click="thisMask"> <div class="this__wrap"> <div class="this__text"> <button class="this__button" @click.self="thisButton"></button> </div> </div> </span> El código no se ha probado, por lo que no estoy seguro de si tiene que adjuntarlo en su ejemplo a button o span