Change ref of the parent from child component using Vue 3-CodePudding

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  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.

CodePudding user response：

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>

CodePudding user response：

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>

CodePudding user response：

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