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.

Kansas

NavBar component can emit an event <a @click.prevent="emit('some-event')"> ... that the parent can handle : <nav-bar@some-event="... do things in here"> – Pilcomayo

Can you do more explanation in Navbar and Parent both? Thanks – Kansas

no, because you have shown naff all of navbar and parent both – Pilcomayo

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>

Lope

Done Buddy :)... – Lope

Answer 2

In the parent

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

    const modal = ref(false);

    const setModalTrue= () => this.modal.value = true;        
</script>
<template>
    ....
    <navbar @nav-event="setModalTrue">
    ....
    </navbar>
    ....
</template>

in navbar

<script setup>
    const emit = defineEmits(["nav-event"]);
    const sendNavEvent = () => emit("nav-event");
</script>
<template>
    ....
    <a @click.prevent="sendNavEvent">
    ....
    </a>
    ....
</template>

note @click.prevent=.... - which does the preventDefault for you

Pilcomayo

Answer 3

Try to emit an event from the Navbar component when you click on the logout link:

<a @click.prevent="logout">
  Logout 
</a>
<script setup>
import {ref} from 'vue';

const emit=defineEmits(['logout'])

const loggedIn=ref(true)

function logout(){
   emit('logout',!loggedIn.value)
}
</scipt>

in parent :

<Navbar @logout="onLogout" />
<script setup>
import Navbar from './components/Navbar.vue';
import {ref} from 'vue';

const modal = ref(false);

function onLogout(logged){
   modal.value=logged
}
</scipt>

Leafage