-
emit 개념 관련 정리VUE.JS 2020. 4. 30. 14:34
하위 컴포넌트의 메서드에서 상위 컴포넌트로 통신하는 방법은 VUE에서 emit을 사용한다.
아래 소스와 결과를 보면 쉽게 이해가 가능하다.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div id="app"><p>{{ num }}</p><!-- $emit('pass')를 이용해서 상위 컴포넌트의 logText 메서드 호출--><app-header v-on:pass="logText"></app-header><!-- $emit('add')를 이용해서 상위 컴포넌트의 increaseNumber 메서드 호출--><app-content v-on:add="increaseNumber"></app-content></div><script>//하위 컴포넌트 app Header에서 클릭 이벤트 발생 (emit 사용)var appHeader = {template : '<button v-on:click="passEvent">Click</button>',methods : {passEvent :function() {this.$emit('pass');}}}//하위 컴포넌트 app Content에서 클릭 이벤트 발생 (emit 사용)var appContent = {template : '<button v-on:click="addNumber">add</button>',methods : {addNumber : function() {this.$emit('add');}}}new Vue({el : "#app",components : {'app-header' : appHeader,'app-content' : appContent,},data() {return {num : 0}},methods : {logText : function() {console.log('hi');},increaseNumber : function() {}}});</script></body></html>http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter결과
'VUE.JS' 카테고리의 다른 글
Router 관련 정리 (0) 2020.05.03 emit & props를 이용한 같은 레벨의 component 데이터 통신 (0) 2020.04.30 Props 관련 예제 및 실습 (0) 2020.04.26 지역컴포넌트 - 전역컴포넌트 관련 정리 (0) 2020.04.19 HELLO VUE .JS 이해하기 (0) 2020.04.18