Vue.js 如何将属性从父级传递到子级，再传递回父级和子级？

openmyOverlay

在“myComponent

中单击按钮时触发IsMyOverlayoupen
设置为false。按钮点击触发
openmyOverlay
openmyOverlay
将
IsOverlayoud
更改为true并传递到
myOverlay
myOverlay
具有
IsOverlayouted
prop和
OverlayouOpen
数据。
IsOverlayouted
正在监视中。这将
this.overlayOpen`更改为true。单击关闭覆盖。但当我再次点击按钮时，覆盖层并没有打开

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


您应该使用事件在子级和父级之间进行通信

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

然后在你的父母身上：

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



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