Change reference of parent component in child component using Vue 3

Question

I have a child component called Navbar. Logout is an option in the navigation bar.

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

I have imported this Navbar into a parent component named Home. In the Home component, there is a div (a modal box),

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

This modal will only be displayed if the modal reference is true.

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

const modal = ref(false);

</scipt>

My question is, how can I set this mode ref value to when we click on the logout option in the Navbar child component true.

Answer 1

In parent

sssccc

In the navigation bar

sssccc

Note@click.prevent=.... - it does preventDefault

for you

Answer 2

You can tell from your child Navbar.vue

  Logout 

and

sssccc

Then you would use Navbar.vue in the parent

.
.
.

sssccc