Change ref of the parent from child component using Vue 3

Question

I have a child component called Navbar. A logout is an option in the Navbar.

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

I have imported this Navbar into my parent component called Home. And in the Home component, there is a div (a modal),

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

And this modal will show only if the modal ref is true.

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

const modal = ref(false);

</scipt>

My question is how to make this modal ref value to true when we click the logout option in my Navbar child component.

Answer 1

You can emit from the child say Navbar.vue

<a @click="buttonClick">
  Logout 
</a>

and

<script setup>
const emit = defineEmits(['showModal'])

function buttonClick() {
  emit('showModal', true)
}
</script>

and then you would have used the Navbar.vue in parent like

<Navbar @showModal="setModalVisibility" />
.
.
.

<script setup>
function setModalVisibilty() {
  modal.value = true;
}
</script>