728x90
반응형
컴포넌트의 데이터 참조방법(ref)
- 부모컴포넌트와 자식컴포넌트는 서로의 컴포넌트에서 정의된 data, computed, methods 옵션 속성에 접근할 수 있다.
- ref 속성으로 컴포넌트의 참조를 생성하여 접근한다.
App.vue
<script>
import RefChild from './components/refChild.vue';
export default{
components : {
RefChild,
},
data(){
return{
parentNum : 10,
}
},
computed : {
numOddEven(){
return this.parentNum % 2 === 0 ? '짝수' : '홀수';
},
},
methods :{
getParentNum(){
return this.parentNum;
}
},
mounted(){
console.log(this.$refs.childRef.childNum);
console.log(this.$refs.childRef.childNumOddAdd);
console.log(this.$refs.childRef.getChildNum());
},
}
</script>
<template>
<RefChild ref="childRef"></RefChild>
</template>
<style scoped>
</style>
RefChile.vue
<script>
export default{
data(){
return{
childNum : 0,
};
},
computed : {
childNumOddAdd(){
return this.childNum % 2 === 0 ? '짝수' : '홀수';
},
},
methods : {
getChildNum(){
return this.childNum;
},
},
mounted(){
console.log(this.$parent.numOddEven);
console.log(this.$parent.getParentNum());
},
}
</script>
<template>
<h1> RefChild </h1>
<p>{{ $parent.parentNum }}</p>
<p>{{ $parent.numOddEven }}</p>
<p>{{ $parent.getParentNum() }}</p>
<p>{{ this.childNumOddAdd }}</p>
<p>{{ this.getChildNum() }}</p>
</template>
728x90
반응형
'Front' 카테고리의 다른 글
| Vue Composition API (0) | 2024.10.18 |
|---|---|
| 컴포넌트 슬롯(Slot) (1) | 2024.10.17 |
| Vue 컴포넌트의 데이터 효율적으로 다루기 (0) | 2024.10.16 |
| Vue component에 속성과 이벤트 정의 (0) | 2024.10.16 |
| Vue 컴포넌트 생명주기 이해하기 (2) | 2024.10.16 |