What is the correct way to remove Vue child component? I found two ways of doing it.
- Emit an event from child component to parent component and parent can remove the child component.
- Use v-if inside child component and child component can toggle the condition.
I am more leaning toward the second approach since we don’t have to force parent components to implement listener when it uses this child component. e.g: if this child component is used at 100 places, all those places have to listen for the child custom close event.
Can anyone explain what happen under the hood for both scenario? Is there a different way to remove it? Thanks.
Repl for this example: vue playground
Parent component
<script setup>
import { ref } from 'vue';
import DialogBasic from './DialogBasic.vue';
const isDialogShown = ref(true);
const closeChildDialog = () => isDialogShown.value = false;
</script>
<template>
<div>
<h1>Parent Component </h1>
<DialogBasic
v-if="isDialogShown"
@parentCloseDialog="closeChildDialog"
/>
</div>
</template>Child component
<script setup>
import { ref } from 'vue';
const isShown = ref(true);
const closeMyself = () => isShown.value = false;
</script>
<template>
<div v-if="isShown" class="dialog">
<h1>Dialog Component</h1>
<button @click="$emit('parentCloseDialog')">Parent closes dialog</button>
<button @click="closeMyself">Dialog closes itself</button>
</div>
</template>
<style scoped>
.dialog {
background-color: aliceblue;
outline: solid red 1px;
row-gap: 5px;;
width: 300px;
display: flex;
flex-direction: column;
}
</style>