Vue
같은 컴포넌트 레벨의 통신방법
hjcode
2019. 10. 30. 17:05
<div id="app">
<app-header v-bind:propsdata="num"></app-header>
<app-content v-on:pass="deliverNum"></app-content>
<!-- 2. pass라는 이벤트를 받으면 deliverNum 실행 -->
</div>
var appHeader = {
template: '<div>Header</div>',
props: ['propsdata']
// 4. props로 상위 컴포넌트에서 num의 값을 받아온다.
}
var appContent = {
template: '<div>Content<button v-on:click="passNum">pass</button></div>',
methods: {
passNum: function() {
this.$emit('pass', 10);
// 1. pass라는 이벤트에 10을 인자로 넘김
}
}
}
new Vue({
el: '#app',
components: {
'app-header': appHeader,
'app-content': appContent
},
data: {
num: 0
},
methods: {
deliverNum: function(val) {
this.num = val;
}
// 3. deliverNum의 인자로 10을 받고 this.num에 대입한다.
}
});
같은 레벨의 컴포넌트는 통신이 안되므로 appContent에서
부모 컴포넌트(root)에게 이벤트를 올려주고
하위 컴포넌트(appHeader)에게 props로 데이터를 내려줘야한다.
반응형