VUE의 상위 구성 요소에서 모드 대화 상자 전환

VUE의 상위 구성 요소에서 모드 대화 상자 전환

따라서 상위 구성 요소에서 모달 대화상자를 전환하고 여기에 나와 있는 Stack Overflow Question about same Topic을 각 단계에서 시도했지만 여전히 모달 대화상자가 표시되지 않고 VUE 콘솔에서 볼 때 정의되지 않은 값도 있습니다.요소 섹션에서 모달 대화 상자 div는 생성되지 않습니다.

MY MODAL DIALOG가 웹 페이지의 요소 섹션에 표시되지 않고 정의되지 않은 프로펠러 값으로 Vue 콘솔에 표시됩니다.그러나 클릭 효과는 부모 컴포넌트에서 작동하고 있으며 div를 클릭하면 모달은 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>

내가 뭘 놓친거야?

제발 도와주세요, 고마워요.

소품 이름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>

철자가 틀렸습니다v-model에<modal v-modal="modal"/>,그럴 것 같네요.<modal v-model="modal"/>

언급URL : https://stackoverflow.com/questions/61099868/toggle-modal-dialog-from-parent-component-in-vue