데이비뜨
247
2022-07-26 10:29:51 작성 2022-07-26 10:38:05 수정됨
0
707

Vue.js에서 window.open으로 팝업 열기 구현


Vue.js 환경에서 개발을 하다보니 기존에 개발했던 내용을 마이그레이션 하는 과정에서 부득이하게 윈도우 팝업(Window.open)을 어쩔 수 없이 사용하게 되었습니다

SPA에서 흔히 사용하는 레이어 팝업이 아닌 별도의 브라우저에서 새창을 띄우고 Parent(본 어플리케이션 창)과 Child (윈도우 팝업창) 간에 데이터를 송수신해야 하는 기능이 필요했습니다

간략하게 요건정의를 하면 아래와 같습니다

1. Vue.js 개발환경

2. window.open 으로 새창열기 ( get방식으로 파라미터 전송 포함)

3. window.open으로 연 창과 데이터 송수신하기


그래서 3개의 vue 소스를 구현합니다

공통으로 사용할 윈도우 팝업 vue, 윈도우 팝업으로 사용될 vue, ​ 윈도우 팝업을 사용할 부모 vue

구글링을 여러번 해봤지만 마음에 쏙드는 내용이 없어서 최종적으로 정리해 보았습니다

혹시라도 기존 Spring 프로젝트를 Vue.js 로 마이그레이션 하는 과정에서 이런 내용이 필요한 분들에게 도움이 되었으면 좋겠네요 


오늘도 즐코딩 하시길.....


자세한 내용은 아래를 클릭하세요  

 vue.js에서 윈도우 팝업 띄우기 


1
  • 댓글 0

  • 로그인을 하시면 댓글을 등록할 수 있습니다.