Vue.js 하위 구성 요소에서 모달 닫기

Vue.js 하위 구성 요소에서 모달 닫기

나는 이 모달 안에 있는 아동 구성 요소에서 vuejs 모달을 닫기를 원한다.사례:

<modal name="some-modal">
        <some-component></some-component>
</modal>

SomeComponent 안에서 나는 약간의-모듈을 닫기를 원한다.좋은 접근인가? 더 나은 방법으로 할 수 있을까? 제발, 안부 전해줘.

다음을 사용하여 자식 구성 요소에서 이벤트를 내보내야 함this.$emit('exit', true).

그런 다음 상위 구성 요소(모달)에서 해당 이벤트를 청취하십시오.

<modal name="some-modal">
    <some-component @exit="closeModal"></some-component>
</modal>

그런 다음 논리를 작성하여 모델 함수를 닫으십시오.

문제 없어.Vue의 사용자 지정 이벤트 시스템:

https://vuejs.org/v2/guide/components.html#Custom-Events

이것이 이상적인 접근법인지 판단하는 한, 어느 누구도 당신이 제공한 최소한의 정보만 가지고는 알 수 없다.

여기 내가 직접 만든 맞춤 모달인데, 슬롯으로 콘텐츠를 밀어넣고 있다.

myModal.vue


<template>
    <transition name="modal">
        <div class="modal-mask">
            <div class="modal-wrapper">
                <header class="modal-header header-toolbar">
                    <h3>
                        <span>{{modalTitle}}</span>
                    </h3>
                    <span class="icon">
                        <i class="fa fa-times" aria-hidden="true" @click="hideModal"></i>
                    </span>
                </header>
                <section class="modal-body">
                    <slot></slot>
                </section>
            </div>
        </div>
    </transition>
</template>

<script>
    export default {
        name: 'my-modal',
        props: {
            modalTitle: {
                type: String,
                default: null,
            },
        },
        methods: {
            hideModal() {
                this.$emit('hide');
            },
        },
    };
</script>

사용 방법:

<my-modal v-if="modalState" @hide="modalState = false">
            ...Content
</my-modal>

데이터에서 modalState를 false로 설정하거나, 또는 sprop 등으로 정의한다.모달의 모습을 보여주고 싶을 때는 그냥 사실로 바꿔라.만약 네가 클래스 정의를 원한다면 나는 너에게 scs도 줄 수 있다.

범위 슬롯을 사용하여 콜백을 닫는 상위 모달에 전달할 수 있다(예:

modal.vue

<template>
  <div>
    <slot :close="close">
    </slot>
  </div>
</template>

<script>
  export default {
    name: 'Modal',
    methods: {
      close() {
        // Whatever you do to close the modal
      }
    }
  }
</script>

이제 슬롯에서 사용 가능:

<modal name="some modal" v-slot="slotScope">
  <some-component @close="slotScope.close" />
</modal>

이렇게 하면 '일부 컴포넌트'에서 '닫힘' 이벤트를 내보낼 때마다 '모달' 컴포넌트의 클로즈 메서드가 트리거된다.

참조URL: https://stackoverflow.com/questions/46153994/vue-js-close-modal-from-child-component