1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="app"> <my-component1></my-component1> <my-component2></my-component2> </div> <script src="https://unpkg.com/vue"></script> <script> //첫 번째 컴포넌트 내용 var cmp1 = { template : '<div>첫 번째 지역 컴포넌트 : {{ cmp1Data }}</div>', data : function(){ return { cmp1Data : 100 } } } //두 번째 컴포넌트 내용 var cmp2 = { template : '<div>두 번째 지역 컴포넌트 : {{ cmp2Data }}</div>', data : function(){ return { cmp2Data : cmp1.data.cmp1Data } } } new Vue({ el : '#app', components:{ 'my-component1' : cmp1, 'my-component2' : cmp2 } }) </script> </body> </html> | cs |
2개의 컴포넌트를 등록하고, 한 컴포넌트에서 다른 컴포넌트의 값을 직접 참조하는 예제
cmp2Date 에 아무 값도 출력되지 않은 이유는 my-component2에서 my-component1의 값을 직접 참조할 수 없기 때문이다.
컴포넌트는 각각 고유한 유효 범위를 갖고 있기 때문에 직접 다른 컴포넌트의 값을 참조할 수 없다.
결과
상위에서 하위 컴포넌트로 데이터 전달하기
props속성: 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 사용하는 속성
속성정의 방식
1 2 3 4 5 | <script> Vue.component('child-component',{ props:['props 속성 이름'], }) </script> | cs |
상위 컴포넌트의 HTML 코드에 등록된child-component 컴포넌트 태그에 v-bind속성을 추가한다.
<child-component v-bind:props 속성 이름= "상위 컴포넌트의 data속성"></child-component>
다음은 props속성을 사용해서 데이터를 전달하는 예제를 살펴 보겠다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="app"> <child-component v-bind:propsdata="message"></child-component> </div> <script src="https://unpkg.com/vue"></script> <script> Vue.component('child-component',{ props:['propsdata'], template : '<p>{{ propsdata }}</p>' }) new Vue({ el : '#app', data : { message : 'Hello Vue! passd from Parent Component' } }) </script> </body> </html> | cs |
다른예제
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!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"> <app-header :propsdata="message"></app-header> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var appHeader = { template : '<h1>{{propsdata}}<h1>', props : ['propsdata'] } new Vue({ el: '#app', components: { 'app-header' : appHeader }, data:{ message : 'hi' } }); </script> </body> </html> | cs |
하위에서 상위 컴포넌트로 이벤트 전달하기
반대로 하위 컴포넌트에서 상위 컴포넌트로 통신은 이벤트(event emit)를 발생시켜 상위 컴포넌트에 신호를 보내면 된다.
상위 컴포넌트에서 하위 컴포넌트의 특정 이벤트가 발생하기를 기다리고 있다가 하위 컴포넌트에서 특정 이벤트가 발생하면 상위 컴포넌트에서 해당 이벤트를 수신하여 상위 컴포넌트의 메서드를 호출하는 것.
// 이벤트 발생
this.$emit('이벤트명');
// 이벤트 수신
<child-component v-on:이벤트명="상위 컴포넌트의 메서드명"></child-component>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="app"> <child-component v-on:show-log="printText"></child-component> </div> <script src="https://unpkg.com/vue"></script> <script> Vue.component('child-component',{ template : '<button v-on:click="showLog">show</button>', methods: { showLog: function(){ this.$emit('show-log'); } } }) var app = new Vue({ el : '#app', data : { message : 'Hello Vue! passd from Parent Component' }, methods : { printText : function(){ console.log('received an event'); } } }) </script> </body> </html> | cs |
다른예제
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | <!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> <!-- <app-header @:하위 컴포넌트에서 발생한 이벤트이름="상위 컴포넌트 메서드 이름"></app-header> --> <app-header @pass="logText"></app-header><br> <app-content @increase="increaseNumber"></app-content> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var appHeader = { template: '<button @click="passEvent">click me</button>', methods: { passEvent: function () { this.$emit('pass') } } } var appContent = { template: '<button @click="addNumber">add</button>', methods: { addNumber: function(){ this.$emit('increase') } } } new Vue({ el: '#app', components: { 'app-header': appHeader, 'app-content': appContent }, methods: { logText: function () { console.log('hi'); }, increaseNumber : function(){ this.num = this.num + 1; } }, data:{ num:10 } }); </script> </body> </html> | cs |