从 VUE 中的父组件切换模式对话框

Question

所以我想从父组件切换我的模态对话框，我尝试了这里提到的每个步骤Stack Overflow Question about same Topic，但我的模态对话框仍然不可见，当我从 VUE 控制台看到它时它甚至具有未定义的值。并且在元素部分没有创建模态对话框 div。

MY MODAL DIALOG 未显示在网页的元素部分，但显示在 Vue 控制台中，具有未定义的 prop 值。但是单击效果正在父组件中起作用。当我点击 div 时，modal 设置为 true。

---

我的家长代码

<template>
    <div class="collection">
        <section class="section section-elements">
            <div class="elements-outer" @click="openModal">
                 <CopyComponent v-bind:item="item"/>                            
           </div>
        </section>
        <modal v-modal="modal"/>
    </div>
</template>
<script>
import Modal from "../components/Modal.vue";
export default {
    name: 'Collection',
    components: {
        Modal
    },
    data() {
        return {
            modal: false
        }
    },
    methods: {
        openModal() {
            this.modal = !this.modal;
        }
    }

}
</script>

---

我的子组件

<template>
<div v-if="value" class="modal">
    <div class="body">
        body
    </div>
    <div class="btn_cancel" @click="modalToggle">
        <i class="icon icon-cancel" />
    </div>
</div>
</template>

 <script>
   export default {
   name: "Modal",
   props: ["value"],
   methods: {
    modalToggle() {
      this.$emit("input", !this.value);
    }
  }
};
</script>

我错过了什么吗？

请帮忙，谢谢。

Answer 1

你在<modal v-modal="modal"/>中拼错了v-model，应该是<modal v-model="modal"/>

Answer 2

您的道具被称为value，因此您需要从父组件传递它，同时为切换模式分配事件。

<modal :value="modal" @toggle="modalToggle"/>

在你的孩子身上：

<template>
<div v-if="value" class="modal">
    <div class="body">
        body
    </div>
    <div class="btn_cancel" @click="modalToggle">
        <i class="icon icon-cancel" />
    </div>
</div>
</template>
<script>
   export default {
   name: "Modal",
   props: ["value"],
   methods: {
    modalToggle() {
      this.$emit("toggle");
    }
  }
}
</script>