CODEWITHSUNDEEP
vue.js
user7331530
user7331530

Reputation: 985

How can I pass properties from parent to child and back to parent and to child?

openmyOverlay triggers on button click in 'myComponent. isMyOverlayOpenis set to false. Button click triggersopenmyOverlay. openmyOverlaychangesisOverlayOpenedto true and passes tomyOverlay. myOverlayhasisOverlayOpenedprop andoverlayOpendata.isOverlayOpenedis being watched. Which changesthis.overlayOpen` to true. Clicking closes on overlay. But when I click on button again, overlay does not open.

<template>
    <button
      @click="openmyOverlay"
    >
      <myOverlay :isOverlayOpened="isMyOverlayOpen" />
    </button>
</template>

<script>
import myOverlay from "./myOverlay.vue";
export default {
  name: "my",
  props: {
  },
  components: {
    myOverlay,
  },
  data() {
    return {
      isMyOverlayOpen: false,
    };
  },
  methods: {
    openmyOverlay() {
      this.isMyOverlayOpen = true;
    },
  },
};
</script>

myOverlay

<template>
    <Modal
      v-if="overlayOpen"
      @triggerCloseOverylayInModal="closeModalOverlay"
      :overlayOpen="overlayOpen"
    />
</template>

<script>
import Modal from "......./modal";
export default {
  name: "myOverlay",
  components: {
    Modal,
  },
  props: {
    isOverlayOpened: Boolean,
  },
  data() {
    return {
      overlayOpen: false,
    };
  },
  methods: {
    openModalOverlay() {
      this.overlayOpen = true;
    },
    closeModalOverlay() {
      this.overlayOpen = false;
    },
  },
  watch: {
    isOverlayOpened() {
      this.openModalOverlay();
      this.isOverlayOpened = false;
    },
  },
};
</script>

Upvotes: 0

Views: 36

Answers (1)

maembe
maembe

Reputation: 1300

You should use events to communicate from child to parent.

methods: {
  openModalOverlay() {
    this.overlayOpen = true;
    this.$emit('open');
  },
  closeModalOverlay() {
    this.overlayOpen = false;
    this.$emit('close');
  },
},

Then in your parent:

<myOverlay @close="isMyOverlayOpen=false" @open="openmyOverlay" overlayOpened="isMyOverlayOpen" />

Upvotes: 1

Related Questions