Como se muestra en la figura a continuación, el elemento principal es toda el área blanca y hay un evento de clic. Cuando se hace clic en la casilla de verificación, el evento burbujea para ejecutar el evento de clic del elemento principal. Cuando @click.stop se agrega directamente a la casilla de verificación van, no tendrá efecto. El burbujeo de eventos todavía existe
Solución: agregue un div fuera de la casilla de verificación van y agregue @click.stop en el div para evitar que el evento burbujee al hacer clic en la casilla de verificación
<div class="check-box" @click.stop>
<van-checkbox
v-model="item.checked"
ref="checkbox"
@change="onChangeData(item)"/>
</div>Modificadores de eventos comunes
1 @click.stop: Evitar el burbujeo de eventos: cuando se hace clic en el elemento, solo se ejecutará el evento de enlace en sí, y el evento de enlace del elemento principal del elemento no se ejecutará
2 @click.prevent : Impide el comportamiento predeterminado del evento
Por ejemplo: Evite hacer clic en el salto predeterminado de un hipervínculo
<a href="https://cn.vuejs.org/examples/#hello-world" @click.prevent> vue</a>Cuando el formulario tiene solo un cuadro de entrada, al presionar Entrar en el cuadro de entrada se enviará el formulario de forma predeterminada. Si desea evitar el comportamiento de envío predeterminado, también puede agregar @submit.prevent
3 @click.native: vincula el evento de clic nativo. Si desea vincular el evento al componente vue, debe agregar .native, de lo contrario, no tendrá efecto
4 @click.once: el evento vinculado solo se activará una vez
5 @click.capture: la captura de eventos hace que el activador de eventos se active desde la capa superior que contiene este elemento hacia abajo