-
emit & props를 이용한 같은 레벨의 component 데이터 통신VUE.JS 2020. 4. 30. 15:27
이전에 살펴보았던 emit과 props를 사용하기 떄문에 큰 어려운 점 없이 component간의 데이터 통신이 가능하다.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body><!-- same level 통신 content에서 header로 데이터 전송: content에서 상위 컴포넌트(Vue)로 emit을 이용하여 전송하고,다시 Vue에서 props를 이용하여 content로 전송. --><div id="app"><!-- 6. propsdata를 이용하여 num 데이터 출력--><app-header v-bind:propsdata="num"></app-header><!--3. $emit('pass')를 이용해서 상위 컴포넌트의 deliverNum 메서드 호출--><app-content v-on:pass="deliverNum"></app-content></div><script>// 5. props 사용.var appHeader = {template: '<div>{{propsdata}}</div>',props: ['propsdata']}var appContent = {// 1. 클릭 이벤트 발생template: '<div>content<button v-on:click="passNum">pass</button></div>',methods: {// 2. 데이터 10 을 넘김passNum: function() {this.$emit('pass', 10);}}}new Vue({el: '#app',components: {'app-header': appHeader,'app-content': appContent},data: {num: 0},methods: {// 4. data num 변수에 파라미터를 담음.deliverNum: function(value) {this.num = value;}}})</script></body></html>http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter'VUE.JS' 카테고리의 다른 글
axios(ajax) 관련 예제 (0) 2020.05.03 Router 관련 정리 (0) 2020.05.03 emit 개념 관련 정리 (0) 2020.04.30 Props 관련 예제 및 실습 (0) 2020.04.26 지역컴포넌트 - 전역컴포넌트 관련 정리 (0) 2020.04.19