Modifier la référence du composant parent dans le composant enfant à l'aide de Vue 3

Question

J'ai un composant enfant appelé Navbar. La déconnexion est une option dans la barre de navigation.

<a @click="(event) => {event.preventDefault();}">
  Logout 
</a>

J'ai importé ceci Navbar 导入到名为 Home 的父组件中。而在Home dans un composant parent appelé Home. Dans le composant Home, il y a un div (une boîte modale),

<div class="modal" v-if="modal">

Ce modal ne sera affiché que si la référence modale est true.

<script setup>
import Navbar from './components/Navbar.vue';
import {ref} from 'vue';

const modal = ref(false);

</scipt>

Ma question est de savoir comment définir la valeur ref de ce mode sur Navbar 子组件中的 logout 选项时，如何将此模式 ref 值设置为 true lorsque nous cliquons sur l'option logout dans le composant enfant

. 🎜

Answer 1

Chez parent

sssccc

Dans la barre de navigation

sssccc

Attention@click.prevent=.... - 它为您执行preventDefault

Answer 2

Vous pouvez le reconnaître à votre enfant Navbar.vue

  Logout 

et

sssccc

Ensuite, vous utiliserez Navbar.vue dans le parent

.
.
.

sssccc