Tengo un componente secundario llamado Navbar . Un cierre de sesión es una opción en la barra de navegación.
<a @click="(event) => {event.preventDefault();}"> Logout </a> He importado esta Navbar de navegación a mi componente principal llamado Home . Y en el componente Home , hay un div (un modal),
<div class="modal" v-if="modal"> Y este modal se mostrará solo si la referencia modal es true .
<script setup> import Navbar from './components/Navbar.vue'; import {ref} from 'vue'; const modal = ref(false); </scipt> Mi pregunta es cómo hacer que este valor de ref modal sea true cuando hacemos clic en la opción de logout de sesión en mi componente secundario Navbar .
en el padre
<script setup> import Navbar from './components/Navbar.vue'; import {ref} from 'vue'; const modal = ref(false); const setModalTrue= () => this.modal.value = true; </script> <template> .... <navbar @nav-event="setModalTrue"> .... </navbar> .... </template>en la barra de navegación
<script setup> const emit = defineEmits(["nav-event"]); const sendNavEvent = () => emit("nav-event"); </script> <template> .... <a @click.prevent="sendNavEvent"> .... </a> .... </template> note @click.prevent=.... - que hace el preventDefault por usted
Puede emitir desde el niño decir Navbar.vue
<a @click="buttonClick"> Logout </a>y
<script setup> const emit = defineEmits(['showModal']) function buttonClick() { emit('showModal', true) } </script>y luego habrías usado Navbar.vue en padre como
<Navbar @showModal="setModalVisibility" /> . . . <script setup> function setModalVisibilty() { modal.value = true; } </script>Intente emitir un evento desde el componente Navbar cuando haga clic en el enlace de cierre de sesión:
<a @click.prevent="logout"> Logout </a> <script setup> import {ref} from 'vue'; const emit=defineEmits(['logout']) const loggedIn=ref(true) function logout(){ emit('logout',!loggedIn.value) } </scipt>en padre:
<Navbar @logout="onLogout" /> <script setup> import Navbar from './components/Navbar.vue'; import {ref} from 'vue'; const modal = ref(false); function onLogout(logged){ modal.value=logged } </scipt>