Provide -> Inject
이렇게 전달되는 거임.
일종의 provide에 넣으면 전역변수라고 생각하면 됨.
그리고 inject 해서 받을 거 선택할 수 있음.
<script>
export default{
data(){
return {
message:'Hello Vue!!!'
}
},
provide(){
return {
msg : this.message,
msgByApp : "안녕하세요."
}
}
}
</script>
이렇게 provide()는 함수로 씀.
msg, msgByApp이 전역변수 되는 거랑 비슷하게 보면 됨. 근데, 무작정 전역변수가 아니라 가져와야 됨. 일종의 공유통?
<template>
<div>
{{ msg }}
</div>
</template>
<script>
export default{
inject : [
'msg'
]
}
</script>
이렇게 '전역변수이름' 해서 받아서,
그 이름 그대로 쓰면 됨.
배열로 받으면 됨.
근데, 이거 반응형이 아님.
그러니까, 조상 컴포넌트에서 저 message 바꿔도 자손에서 바뀌지 않음.
만약 실시간으로 바꾸고 싶다면
computed() 메소드를 쓰면 됨.
<template>
<Parent :msg="message">
</Parent>
<button @click="this.message ='hello'">asdfsdf</button>
</template>
<script>
import { computed } from 'vue';
import Parent from './components/ParentComp.vue';
export default{
components:{
Parent
},
data(){
return {
message:'Hello Vue!!!'
}
},
provide(){
return {
msg : computed(()=>{
return this.message;
}),
msgByApp : "안녕하세요."
}
}
}
</script>
이렇게 하면 실시간으로 바뀜.
computed 자체에 대한 내용은
https://qwefdg3.tistory.com/581
computed
직역은 계산된. 이라는 뜻인데.. export default { data(){ return { fruits : [ 'Apple', 'Banana', 'Cherry' ] } }, computed:{ hasFruit(){ return this.fruits.length > 2 } }, methods:{ add(){ this.msg2 += '!' } } } 메소드랑 차이점은, computed
qwefdg3.tistory.com
computed() 메소드는 vue에서 따로 지원해 주는...
import { computed } from 'vue';
이렇게 가져와야 함.
'Vue.js' 카테고리의 다른 글
| 컴포지션 API (0) | 2023.10.19 |
|---|---|
| Refs 요소나 컴포넌트를 참조 (0) | 2023.10.19 |
| Emit (0) | 2023.10.13 |
| 최상위 요소(최상위 엘레멘트) (0) | 2023.10.13 |
| slot (0) | 2023.10.13 |