Dentro de mi componente principal, tengo un componente secundario:
<upsetting-moment-step :this-step-number="1" :current-step-number="currentStepNumber" @showNextStep="showNextStep" ></upsetting-moment-step>Mi componente principal también tiene este método:
methods: { showNextStep() { this.currentStepNumber++; } },Llamo a este evento desde un botón en mi componente secundario:
<button type="button" class="btn btn-lg btn-primary" @click="showNextStep">Continue</button>Aquí está el método del componente hijo:
methods: { showNextStep() { this.$emit('showNextStep'); } }, Ahora bien, esto funciona muy bien, pero estoy confundido, porque deja de funcionar cuando uso @show-next-step en lugar de @showNextStep en la etiqueta del componente secundario.
De acuerdo con los documentos , DEBERÍA funcionar, y también es la forma recomendada de hacerlo. Sin embargo, simplemente no funciona.
Lo gracioso es que si lo cambio a mayúsculas y minúsculas, funciona si uso this.$emit('show-next-step'); . Sin embargo, esto me confunde, porque puedo pasar mis accesorios a través de un estuche de serpiente y usarlos en mi componente a través de un estuche de camello.
¿Estoy haciendo algo mal?
En su componente upsetting-moment-step está usando un evento con el nombre @showNextStep , @ - dice que es un evento. Entonces, para ejecutar alguna acción para el evento, primero debe emitirlo (el nombre debe ser el mismo que en el componente. this.$emit('showNextStep'); para emitir el evento. Una vez que emita el evento, hasta su código, se ejecutará la función showNextStep .
La convención de nomenclatura es escribir usando camelCase para JS y kebab-case para etiquetas y eventos.
La transformación automática de casos de nombres de eventos debería funcionar según la documentación, como describió. Sin embargo, existe un error conocido ( @vuejs/vue-next #2841 ) en las versiones 3.0.0 a 3.0.5.
La solución se lanzó en 3.0.6 , pero probablemente debería actualizar a la última versión ( 3.2.7 a partir de hoy).