[Vue.js] 컴포넌트 통신

스코프: 영향을 미칠 수 있는 범위 

this.message // 스코프 내부의 데이터

this.update() //스코프 내부의 메서드 

 

 

 

스코프는 다른 기능에 실수로 영향을 미치지 않게 하기 위한 것.

 

컴포넌트끼리 데이터를 공유하거나 연동하려면, 

1. props 와 사용자 정의 이벤트를 사용해서 부모 자식끼리 통신하기

2. 부모 자식 관계가 아닌 경우 이벤트 버스를 사용해서 통신하기

3. Vuex를 사용한 상태관리

 

 

 

 

child-component는 parent-component 의 자식 컴포넌트

Vue.component('parent-component',{
    template: '<p><child-component></child-component></p>'
})

 

 

 

 

 

● 부모 컴포넌트의 템플릿에서 자식 컴포넌트를 사용할 때, 속성으로 컴포넌트에 데이터를 가지도록 할 수 있다

 

▼부모 측 템플릿 HTML

<div id="app"> 
    <child-component val="자식A"></child-component>
    <child-component val="자식B"></child-component> 
</div>

 

 

▼ 자식컴포넌트 JS

Vue.component('child-component',{
    //템플릿에서 val 사용하기
    template: '<p>{{ val }}</p>',
    //받을 속성 이름 지정하기
    props: ['val']
})
 new Vue({
     el: '#app'
 })

 

 

 

 

 

 

 

●   데이터 바인딩을 사용하면, 부모 컴포넌트가 가지고 있는 데이터를 자식 컴포넌트에 전달할 수 있다. 

▼부모 측 템플릿 HTML

 <child-component v-bind:val="message" class="item"></child-component>

 

▼ 자식컴포넌트 JS

Vue.component('child-component',{
    props: ['val']
})

 

* 단방향으로, props를 사용해서 자식 쪽에서 부모 쪽으로 데이터를 전달할 수는 없음 

 

 

 

 

● 컴포넌트에 속성 부여하기

 

컴포넌트를 정의할 때 루트 태그에 id속성과 class 속성을 지정하고, 부모에서 사용할 때 같은 속성에 다른 값을 지정하면 

부모 템플릿에서 지정한 속성으로 렌더링되며 class 속성은 합쳐진다.

 

▼부모 측 템플릿 HTML

<div id="app"> 
    <child-component id="parent" class="parent"></child-component>
</div>

 

▼ 자식컴포넌트 JS

Vue.component('child-component',{
    template: '<p id="child" class="child">Child</p>'
})
 new Vue({
     el: '#app'
 })