Estoy trabajando en una aplicación Vue 3 . Tengo 3 componentes anidados: un componente de botón, que está anidado dentro de un componente de navegación, que está anidado dentro de un componente de contenido.
El botón debe alternar el valor de la variable booleana isVisible dentro del componente Main.vue (componente de contenido).
En el componente nieto MyButton.vue :
<template> <button @click="handleClick" class="btn btn-sm btn-success"> {{ label }} </button> </template> <script> export default { name: 'MyButton', props: { label: String, isVisible: Boolean }, emits: [ 'toggleVisibility', ], methods: { handleClick() { this.$emit('toggleVisibility') } } } </script> En el componente principal Navigation.vue :
<template> <div class="navigation"> <MyButton :label='"Toggle content"' :isVisible=false @toggleVisibility="$emit('toggleVisibility')" /> </div> </template> <script> import MyButton from './MyButton' export default { emits: [ 'toggleVisibility', ], } </script> En el componente abuelo Main.vue :
<template> <div class="main"> <Navigation /> <div v-if="isVisible" class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> </template> <script> import Navigation from './Ui/Navigation' export default { name: 'Main', components: { Navigation }, props: { title: String, tagline: String, }, data() { return { isVisible: false, } }, methods: { toggleVisibility() { console.log('ok'); this.isVisible = !this.isVisible; } } } </script>Como se puede ver arriba, traté de emitir hacia arriba, un componente a la vez .
Por una razón que no pude entender, esto no funciona.
#1 No declaró el componente MyButton en su componente principal de Navigation .
Agregue esto dentro export default {}
components: { MyButton }, #2 No está escuchando el evento en su componente Main .
Reemplace la línea <Navigation /> con:
<Navigation @toggleVisibility="toggleVisibility" /> PD: Prefiero kebab-case para eventos personalizados definidos. Solo una mejor práctica. toggle-visiblity en lugar de toggleVisibility