Vue.js 하위 구성 요소의 모달을 닫습니다.

Question

이 모달 내 하위 구성 요소에서 vuejs 모달을 닫고 싶습니다. 케이스 :

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

내부 SomeComponent는 좀 모달을 닫으려면. 좋은 접근 방법입니까? 더 나은 방법으로 할 수 있습니까? 제발, 감사합니다

Answer 1

물론 문제가되지 않습니다.

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

는 지금까지이 이상적인 방법 인 경우 판단으로, 아무도 당신이 준 정보를 최소한으로 말할 수 없다 : 당신은 뷰의 사용자 정의 이벤트 시스템을 사용할 수 있습니다.

Answer 2

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

그런 다음 부모 구성 요소 (모달)에서 해당 이벤트를 수신합니다.

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

그런 다음 로직을 closeModal 함수에 씁니다.

Answer 3

여기에 콘텐츠를 넣기 위해 슬롯을 사용하는 사용자 설정 모달이 있습니다. false로 데이터

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

설정 modalState을, 또는 소품이든로 정의 :

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> 

방법을 사용합니다. 모달을 표시하려면이를 사실로 변경하십시오. 클래스 정의를 원한다면 scss도 줄 수 있습니다