Vue.js 시작하기 - Components Communication

 

컴포넌트 통신 방식

- 뷰 컴포넌트는 각각 고유한 데이터 유효범위 가지기 때문에 컴포넌트 간에 데이터를 주고 받기 위해서는 규칙을 따라야함.

 

---

Props 속성

- 컴포넌트 간에 데이터를 전달할 수 있는 컴포넌트 통신 방법

- 상위 컴포넌트에서 하위 컴포넌트로 내려보내는 데이터 속성

Props 속성 코드 형식

- props 속성을 사용하기 위해서는 하위 컴포넌트의 컴포넌트 내용과 상위 컴포넌트의 템플릿에 각각 코드를 추가해줘야함

// 하위 컴포넌트의 내용
var childComponent = {
  props: ['프롭스 속성 명']
}

<!-- 상위 컴포넌트의 템플릿 -->
<div id="app">
  <child-component v-bind:프롭스 속성 명="상위 컴포넌트의 data 속성"></child-component>
</div>

 

✔ tip

- HTML 속성은 대소문자를 구분하지 않으므로 문자열이 아닌 템플릿을 사용할 때는 camelCased prop 이름에 해당하는 kebab-case(하이픈 구분)를 사용해야한다.

e.g.

Vue.component('child', {
  // JavaScript는 camelCase
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
})

<!-- HTML는 kebab-case -->
<child my-message="안녕하세요!"></child>

 

Props 속성 코드 예시

// app-header의 value값에 해당하는 것을 담아줄 변수 이름은 카멜표기법으로 한다.
var appHeader = {
	template: '<h1>{{ propsdata }}</h1>',
    props: ['propsdata']
}
var appContent = {
	template: '<div>{{ propsdata }}</div>',
    props: ['propsdata']
}

new Vue({
	el: '#app',
    components: {
    	'app-header': appHeader,
        'app-content': appContent
    },
    data: {
    	message: 'hi',
        num: 10
    }
})

<!-- app-header를 기준으로 상위컴포넌트는 root임 상위컴포넌트인 root의 데이터 이름은 message 
프롭스 속성이름은 app-header 태그의 내용에 정의하면된다.-->
<div id="app">      
  <!-- <app-header v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"></app-header> -->
  <app-header v-bind:propsdata="message"></app-header> 
  <app-content v-bind:propsdata="num"></app-content>
</div>

 

[출력결과]
<AppHeader>의 props 내용 -> propsdata : "hi"
<AppContent>의 props 내용 -> propsdata : 10

 

---

[Event Emit]

이벤트 발생은 하위 컴포넌트에서 상위 컴포넌트로 통신하는 방식

 

[Event Emit 코드 형식]

하위 컴포넌트의 메서드나 라이프 사이클 훅과 같은 곳에 아래와 같이 코드를 추가

// 하위 컴포넌트의 내용
this.$emit('이벤트 명');

 

그리고 나서 해당 이벤트를 수신하기 위해 상위 컴포넌트의 템플릿에 아래와 같이 구현

<div id="app">
  <child-component v-on:이벤트 명="상위 컴포넌트의 실행할 메서드 명 또는 연산"></child-component>
</div>

 

[Event Emit 코드 예시]

// 하위 컴포넌트 : childComponent
var childComponent = {
  methods: {
    sendEvent: function() {
      this.$emit('update');
    }
  }
}

// 상위 컴포넌트 : root 컴포넌트
new Vue({
  el: '#app',
  components: {
    'child-component': childComponent
  },
  methods: {
    showAlert: function() {
      alert('event received');
    }
  }
})

✔ 하위 컴포넌트인 childComponent에서 sendEvent() 메서드가 실행되면 update 라는 이벤트가 발생. 이를 상위 컴포넌트인 루트 컴포넌트의 v-on 디렉티브로 이벤트를 받아 showAlert() 메서드를 실행시킴
✔ 실행 결과는 evnet received라는 경고창이 표시됨

 

[Event Emit 코드 예시(내가 짠 코드)]

var appHeader = {
	template: '<button v-on:click="passEvent">click me</button>',
    methods: {
    	passEvent: function(){
        	this.$emit('pass');
       }
   }
}

var appContent = {
	template: '<button v-on: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');
        },
        // ... 메서드 정의하기
        // add버튼 클릭햇을 때 이벤트 올려서 위에있는 데이터의 넘의 값을 하나 증가.
        increaseNumber: function() {
        	this.num = this.num+1;
        }
   },
   data: {
   	num: 10
   }
});

<div id="app">
	<p>{{ num }}</p>
    <!-- <app-header v-on:하위컴포넌트에서 발생한 이벤트 이름="상위컴포넌트의 메서드 이름"></app-header> -->
    <app-header v-on:pass="logText"></app-header>
    <app-content v-on:increase="increaseNumber"></app-content>
</div>