Best way to handle Vuetify v-menu

Question

I am new to the Vue.js and recently we started building my product in Vue and Vuetify. I had written a custom component around the v-menu and using that as a popover. I have written the following code and it's working fine but I am looking for the best way to handle.

Popover.vue

<template>
  <v-menu 
    v-model="togglePopover"
    v-bind="menuProps"
    :offset-y="true"
  >
    <slot slot="activator"></slot>
    <slot name="bodyContent"></slot>
  </v-menu>
</template>
    
<script>
export default {
  props: {
    closePopover: {
      type: Boolean,
      default: false,
    },
    menuProps: {}, // this property is meant to access the default properties of the vuetify v-menu
  },
  data() {
    return {
      togglePopover: false,
    };
  },
  watch: {
    closePopover(newValue) {
      if(!newValue) {
        this.togglePopover = false;
      }
    },
  },
};
</script>

parent component, where I am calling popover component looks like below.

<Popover 
  :menuProps="menusProps"
  :closePopover="showPopover"
>
  <v-btn>Dropdown</v-btn>
  <div slot=bodyContent>
    <v-text-field placeholder="Type something here"></v-text-field>
    <v-btn @click="showPopover=false">Submit</v-btn>
  </div>
</Popover>

My question here In my popover component, I used data property called togglePopover to enable popover. Is there any way to handle popover open/close from parent component without declaring the extra property in child component.

Answer 1

There is a way. When you want to close the popover from the child, emit an event called "close-popover" (this.$emit('close-popover'). Then, on your parent, set @close-popover="showPopover=false". This way, you do not have to declare the data variable on your child as well. Hope this helps. Check out event emitters: https://vuejs.org/v2/guide/components-custom-events.html.