본문 바로가기
Vue.js

vue.js 팝업 닫은 후, 원래 페이지 refresh

by 무대포 개발자 2020. 12. 12.
728x90
반응형

vue.js 팝업 닫은 후, 원래 페이지 refresh

  • 기본 페이지에서 popup 으로 이동하고. 팝업을 닫을 때, 기본 페이지로 이동하면서 refresh 하는 법
  • 핵심은 eventBus 를 이용해서 처리.
  • 팝업 페이지에서 이벤트 버스를 통해 기본페이지 refresh 함수를 호출.
<!-- 기본 페이지 -->
// 아래와 같이 기본페이지에서 팝업으로 이동
this.$modal.show(xxxPopup, {
    xxx
}

// 이벤트 버스 on 
created() {
        eventBus.$on('xxxRefresh', data => {
            // 기본 페이지 refresh 로직
        }
}

<!-- popup 페이지  -->

// 팝업 페이지에서 함수 호출 후, 팝업 닫고 기본 페이지로 이동.
// 동시에 이벤트 버스 호출 
axios.post('xxx {'xxx:xxx'} , (response) => {
    if (response) {
        swal({
            title: 'xxx 테스트'
            xxx
            xxx
        })

        this.$emit('close');
        // 기본 페이지 이벤트 버스 호출
        eventBus.$emit('xxx-refresh' , 'refresh 테스트');
    } else {
        // response error
    }

}

댓글