Ändern Sie die Referenz der übergeordneten Komponente in der untergeordneten Komponente mit Vue 3

Question

Ich habe eine untergeordnete Komponente namens Navbar. Abmelden ist eine Option in der Navigationsleiste.

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

Ich habe dies Navbar 导入到名为 Home 的父组件中。而在Home in eine übergeordnete Komponente namens Home importiert. In der Home-Komponente gibt es ein div (eine modale Box),

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

Dieses Modal wird nur angezeigt, wenn die Modalreferenz true ist.

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

const modal = ref(false);

</scipt>

Meine Frage ist, wie man diesen Modus-ref-Wert auf Navbar 子组件中的 logout 选项时，如何将此模式 ref 值设置为 true setzt, wenn wir auf die Option logout in der

untergeordneten Komponente klicken. 🎜

Answer 1

在父级中

在导航栏中

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

Answer 2

你可以从孩子身上发出说 Navbar.vue

  Logout 

和

然后你会在父级中使用 Navbar.vue

.
.
.