Открыть всплывающее окно в родительском компоненте, щелкнув дочерний компонент

Question

Мне было интересно, как можно открыть всплывающее окно, если элемент, по которому щелкают, находится в дочернем компоненте. По сути, у меня есть что-то вроде этого:

//Child

<button @click="openPopup">Open</button>

export default {
  methods: {
    openPopup() {
      this.$emit('openPopup');
    }
  }
}

    //Parent
    <popup v-show="isShown"></popup>
   export default {
    data() {
      return {
       isShown:false
      }
    }

Итак, в основном я вижу, что событие генерируется, но не знаю, как его применить, чтобы изменить значение isShown

Answer 1

Попробуйте это:

Дочерний компонент:

<template>
    <div>
        <button @click="openPopup(true)">Open</button>
    </div>
</template>


<script>
// ...

export default {
  // ...
  methods: {
    openPopup(flag) {
      this.$emit("openPopupInParent", flag);
    }
  }
};
</script>

Родительский компонент:

<template>
    <div>
        <popup v-show="isShown" @openPopupInParent="showPopup"></popup>
    </div>
</template>

<script>
// ...

export default {
  // ...
  methods: {
    showPopup(flag) {
      this.isShown = flag
    }
  }
};
</script>