使用Vue 3在子元件中更改父元件的引用

Question

我有一個名為 Navbar 的子元件。註銷是導覽列中的選項。

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

我已將此 Navbar 匯入到名為 Home 的父元件中。而在Home元件中，有一個div（一個模態框），

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

只有當模態引用為 true 時，此模態才會顯示。

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

const modal = ref(false);

</scipt>

我的問題是，當我們點擊Navbar 子元件中的logout 選項時，如何將此模式ref 值設定為 true 。

Answer 1

在父級中

sssccc

在導覽列中

sssccc

注意@click.prevent=.... - 它為您執行preventDefault

Answer 2

你可以從孩子身上發出說 Navbar.vue

#

  Logout 

和

sssccc

然後你會在父級中使用 Navbar.vue

.
.
.

sssccc