vue.js - 如何将属性从父级传递给子级并返回给父级和子级？

Question

openmyOverlay触发按钮单击“myComponent . isMyOverlayOpen is set to false. Button click triggersopenmyOverlay . openmyOverlay changesisOverlayOpened to true and passes tomyOverlay . myOverlay hasisOverlayOpened prop andoverlayOpen data.isOverlayOpened is being watched. Which changesthis.overlayOpen”为真。单击关闭覆盖。但是当我再次单击按钮时，覆盖不会打开。

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

标签： vue.js

Answer 1

您应该使用事件从孩子到父母进行交流。

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

然后在你的父母：

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