<p><br></p><p>자식 팝업에서 부모창(vue.js SPA)에 이벤트를 전달할 일이 생겼다.&nbsp;</p><p>OAuth 인증 후에 부모창을 갱신해야 하는 이유였는데 아래와 같이 해결했다.</p><p><br></p><h3>1. 부모창</h3><div style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, &quot;Courier New&quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #808080;">&lt;</span><span style="color: #569cd6;">template</span><span style="color: #808080;">&gt;</span></div><div>&nbsp;&nbsp;<span style="color: #808080;">&lt;</span><span style="color: #569cd6;">div</span>&nbsp;<span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"container-fluid"</span><span style="color: #808080;">&gt;</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;">&lt;</span><span style="color: #569cd6;">h3</span><span style="color: #808080;">&gt;</span>Test&nbsp;Page<span style="color: #808080;">&lt;/</span><span style="color: #569cd6;">h3</span><span style="color: #808080;">&gt;</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;">&lt;</span><span style="color: #569cd6;">hr</span><span style="color: #808080;">&gt;</span></div><div>&nbsp;</div><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;">&lt;</span><span style="color: #569cd6;">div</span>&nbsp;<span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"col-12"</span><span style="color: #808080;">&gt;</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;">&lt;</span><span style="color: #569cd6;">h3</span><span style="color: #808080;">&gt;</span>window.postMessage<span style="color: #808080;">&lt;/</span><span style="color: #569cd6;">h3</span><span style="color: #808080;">&gt;</span></div><br><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;">&lt;</span><span style="color: #569cd6;">button</span>&nbsp;@<span style="color: #9cdcfe;">click</span>="<span style="color: #9cdcfe;">childWindowPopup</span>"<span style="color: #808080;">&gt;</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;childWindowPopup</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;">&lt;/</span><span style="color: #569cd6;">button</span><span style="color: #808080;">&gt;</span></div><br><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;">&lt;</span><span style="color: #569cd6;">div</span>&nbsp;<span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"border"</span><span style="color: #808080;">&gt;</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;">&lt;</span><span style="color: #569cd6;">p</span><span style="color: #808080;">&gt;</span>{{&nbsp;<span style="color: #9cdcfe;">recieve</span>.<span style="color: #9cdcfe;">time</span>&nbsp;|&nbsp;<span style="color: #dcdcaa;">moment</span>(<span style="color: #ce9178;">"YYYY-MM-DD&nbsp;HH:mm:ss.sss"</span>)&nbsp;}}<span style="color: #808080;">&lt;/</span><span style="color: #569cd6;">p</span><span style="color: #808080;">&gt;</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;">&lt;</span><span style="color: #569cd6;">p</span><span style="color: #808080;">&gt;</span>{{&nbsp;<span style="color: #4ec9b0;">JSON</span>.<span style="color: #dcdcaa;">stringify</span>(<span style="color: #9cdcfe;">recieve</span>.<span style="color: #9cdcfe;">event</span>)&nbsp;}}<span style="color: #808080;">&lt;/</span><span style="color: #569cd6;">p</span><span style="color: #808080;">&gt;</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;">&lt;/</span><span style="color: #569cd6;">div</span><span style="color: #808080;">&gt;</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;">&lt;/</span><span style="color: #569cd6;">div</span><span style="color: #808080;">&gt;</span></div><div>&nbsp;&nbsp;<span style="color: #808080;">&lt;/</span><span style="color: #569cd6;">div</span><span style="color: #808080;">&gt;</span></div><div><span style="color: #808080;">&lt;/</span><span style="color: #569cd6;">template</span><span style="color: #808080;">&gt;</span></div><br><div><span style="color: #808080;">&lt;</span><span style="color: #569cd6;">script</span><span style="color: #808080;">&gt;</span></div><br><div><span style="color: #c586c0;">export</span>&nbsp;<span style="color: #c586c0;">default</span>&nbsp;{</div><div>&nbsp;&nbsp;<span style="color: #dcdcaa;">data</span>&nbsp;()&nbsp;{</div><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">return</span>&nbsp;{</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">recieve:</span>&nbsp;{</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">event:</span>&nbsp;{},</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">time:</span>&nbsp;<span style="color: #569cd6;">null</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;}</div><div>&nbsp;&nbsp;},</div><div>&nbsp;&nbsp;<span style="color: #dcdcaa;">mounted</span>&nbsp;()&nbsp;{</div><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">window</span>.<span style="color: #dcdcaa;">addEventListener</span>(<span style="color: #ce9178;">'message'</span>,&nbsp;<span style="color: #9cdcfe;">event</span>&nbsp;<span style="color: #569cd6;">=&gt;</span>&nbsp;{</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #6a9955;">//&nbsp;mount하면서&nbsp;mesasge&nbsp;라는&nbsp;event를&nbsp;대기한다</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #c586c0;">if</span>&nbsp;(<span style="color: #9cdcfe;">event</span>.<span style="color: #9cdcfe;">data</span>?.<span style="color: #9cdcfe;">cmd</span>&nbsp;===&nbsp;<span style="color: #ce9178;">'closeOAuth'</span>)&nbsp;{</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">recieve</span>.<span style="color: #9cdcfe;">event</span>&nbsp;=&nbsp;<span style="color: #9cdcfe;">event</span>.<span style="color: #9cdcfe;">data</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">this</span>.<span style="color: #dcdcaa;">recieveChildWindowData</span>()</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;})</div><div>&nbsp;&nbsp;},</div><div>&nbsp;&nbsp;<span style="color: #9cdcfe;">methods:</span>&nbsp;{</div><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #dcdcaa;">childWindowPopup</span><span style="color: #9cdcfe;">:</span>&nbsp;<span style="color: #569cd6;">function</span>&nbsp;()&nbsp;{</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">const</span>&nbsp;<span style="color: #4fc1ff;">url</span>&nbsp;=&nbsp;<span style="color: #ce9178;">'http://localhost'</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #6a9955;">//&nbsp;일반적인&nbsp;팝업을&nbsp;띄운다</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">this</span>.<span style="color: #dcdcaa;">$popupWindow</span>(<span style="color: #9cdcfe;">url</span>)</div><div>&nbsp;&nbsp;&nbsp;&nbsp;},</div><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #dcdcaa;">recieveChildWindowData</span>&nbsp;()&nbsp;{</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">this</span>.<span style="color: #9cdcfe;">recieve</span>.<span style="color: #9cdcfe;">time</span>&nbsp;=&nbsp;<span style="color: #4ec9b0;">Date</span>.<span style="color: #dcdcaa;">now</span>()</div><div>&nbsp;&nbsp;&nbsp;&nbsp;}</div><br><div>&nbsp;&nbsp;}</div><div>}</div><div><span style="color: #808080;">&lt;/</span><span style="color: #569cd6;">script</span><span style="color: #808080;">&gt;</span></div><br><div><span style="color: #808080;">&lt;</span><span style="color: #569cd6;">style</span>&nbsp;<span style="color: #9cdcfe;">scoped</span><span style="color: #808080;">&gt;</span></div><div><span style="color: #d7ba7d;">h1</span>,<span style="color: #d7ba7d;">h2</span>,<span style="color: #d7ba7d;">h3</span>,<span style="color: #d7ba7d;">h4</span>,<span style="color: #d7ba7d;">h5</span>,<span style="color: #d7ba7d;">h6</span>{</div><div>&nbsp;&nbsp;<span style="color: #9cdcfe;">margin-top</span>:&nbsp;<span style="color: #b5cea8;">30px</span>;</div><div>}</div><div><span style="color: #d7ba7d;">button</span>{</div><div>&nbsp;&nbsp;<span style="color: #9cdcfe;">margin</span>:<span style="color: #b5cea8;">10px</span>;</div><div>}</div><div><span style="color: #808080;">&lt;/</span><span style="color: #569cd6;">style</span><span style="color: #808080;">&gt;</span></div><br></div><p><br></p><p><br></p><h3>2. 자식창</h3><div style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, &quot;Courier New&quot;, monospace; font-size: 14px; line-height: 19px; white-space: pre;"><div><span style="color: #808080;">&lt;!</span><span style="color: #569cd6;">DOCTYPE</span>&nbsp;<span style="color: #9cdcfe;">html</span><span style="color: #808080;">&gt;</span></div><div><span style="color: #808080;">&lt;</span><span style="color: #569cd6;">html</span>&nbsp;<span style="color: #9cdcfe;">lang</span>=<span style="color: #ce9178;">"ko"</span>&nbsp;<span style="color: #9cdcfe;">xmlns</span>=<span style="color: #ce9178;">"http://www.w3.org/1999/xhtml"</span><span style="color: #808080;">&gt;</span></div><div><span style="color: #808080;">&lt;</span><span style="color: #569cd6;">head</span><span style="color: #808080;">&gt;</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;">&lt;</span><span style="color: #569cd6;">meta</span>&nbsp;<span style="color: #9cdcfe;">charset</span>=<span style="color: #ce9178;">"utf-8"</span>&nbsp;<span style="color: #808080;">/&gt;</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;">&lt;</span><span style="color: #569cd6;">title</span><span style="color: #808080;">&gt;&lt;/</span><span style="color: #569cd6;">title</span><span style="color: #808080;">&gt;</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;">&lt;</span><span style="color: #569cd6;">script</span>&nbsp;<span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"http://code.jquery.com/jquery-latest.min.js"</span><span style="color: #808080;">&gt;&lt;/</span><span style="color: #569cd6;">script</span><span style="color: #808080;">&gt;</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;">&lt;</span><span style="color: #569cd6;">script</span>&nbsp;<span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"https://cdnjs.cloudflare.com/ajax/libs/jsencrypt/2.3.1/jsencrypt.min.js"</span><span style="color: #808080;">&gt;&lt;/</span><span style="color: #569cd6;">script</span><span style="color: #808080;">&gt;</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;">&lt;</span><span style="color: #569cd6;">style</span><span style="color: #808080;">&gt;</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #d7ba7d;">button</span>{</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">font-size</span>:&nbsp;<span style="color: #b5cea8;">20px</span>;</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">padding</span>:<span style="color: #b5cea8;">20px</span>;</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">background</span>:&nbsp;<span style="color: #ce9178;">skyblue</span>;</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;">&lt;/</span><span style="color: #569cd6;">style</span><span style="color: #808080;">&gt;</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;">&lt;</span><span style="color: #569cd6;">script</span>&nbsp;<span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"text/javascript"</span><span style="color: #808080;">&gt;</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #569cd6;">function</span>&nbsp;<span style="color: #dcdcaa;">preClose</span>(){</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #6a9955;">//&nbsp;postMessage&nbsp;함수를&nbsp;사용하여&nbsp;부모창&nbsp;호출</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #6a9955;">//&nbsp;iframe&nbsp;같은&nbsp;경우엔&nbsp;window.parent.postMessage&nbsp;라고&nbsp;쓴다</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">window</span>.<span style="color: #9cdcfe;">opener</span>.<span style="color: #dcdcaa;">postMessage</span>({</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">cmd:</span>&nbsp;<span style="color: #ce9178;">'closeOAuth'</span>,</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">params:</span>&nbsp;{</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">success:</span>&nbsp;<span style="color: #569cd6;">true</span>,</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;<span style="color: #ce9178;">'*'</span>);</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #9cdcfe;">window</span>.<span style="color: #dcdcaa;">close</span>()</div><div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}</div><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;">&lt;/</span><span style="color: #569cd6;">script</span><span style="color: #808080;">&gt;</span></div><div><span style="color: #808080;">&lt;/</span><span style="color: #569cd6;">head</span><span style="color: #808080;">&gt;</span></div><div><span style="color: #808080;">&lt;</span><span style="color: #569cd6;">body</span><span style="color: #808080;">&gt;</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;">&lt;</span><span style="color: #569cd6;">h1</span><span style="color: #808080;">&gt;</span>예제<span style="color: #808080;">&lt;/</span><span style="color: #569cd6;">h1</span><span style="color: #808080;">&gt;</span></div><div>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #808080;">&lt;</span><span style="color: #569cd6;">button</span>&nbsp;<span style="color: #9cdcfe;">onclick</span>=<span style="color: #ce9178;">"</span><span style="color: #dcdcaa;">preClose</span><span style="color: #ce9178;">()</span><span style="color: #ce9178;">"</span><span style="color: #808080;">&gt;</span>닫기전에&nbsp;호출!<span style="color: #808080;">&lt;/</span><span style="color: #569cd6;">button</span><span style="color: #808080;">&gt;</span></div><div><span style="color: #808080;">&lt;/</span><span style="color: #569cd6;">body</span><span style="color: #808080;">&gt;</span></div><div><span style="color: #808080;">&lt;/</span><span style="color: #569cd6;">html</span><span style="color: #808080;">&gt;</span></div></div><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p><p><br></p>

[Vue.js] 팝업창에서 Vuejs SPA 에 이벤트 전달하기