teleport, provide/inject

teleport

• <teleport to=선택자>자식들</teleport> => 자식들을 선택자 내부로 이동!!

provide/inject

• 부모가 후손들에게 데이터를 줄 때 provide를 사용, 해당 데이터를 받고 싶은 후손(자식 포함)들은 inject로 받는다!

• provide 메소드 옵션을 컴포넌트에 명시, 내려주고 싶은 데이터를 return한다

//App.vue
<template>
	<h1>{{msg}}</h1>
		<Hello /> // 내려줄 때 아무런 표시 x
</template>

<script>
...
	export default {
	        provide() {
	            return {
	                msg: this.msg 
	            }
	        },
	        data() {
	            return {
	                msg: '',
..
</script>



//Hello.vue
<template>
	<h2>{{msg}}</h2> //바로 쓰면 됨 ㅇㅇ
</template>

<script>
...
	export default {
		inject: ['msg'] //provide한 데이터를 받는다
	}
..
</script>

• 반응성을 기본적으로 가지지 않는다
• computed 이용하면, provide하는 데이터를 바꿀 때마다 자inject한 자식의 데이터에도 영향을 미침
• 자식은 객체 형태로 데이터를 받아서, value 속성으로 꺼내줘야 큰 따옴표가 제거된다

//App.vue
<script>
...
import {computed} from 'vue'

	export default {
	        provide() {
	            return {
	                msg: computed(()=>this.msg)
	            }
	        },
</script>

//Hello.vue
<template>
	<h2>{{msg.value}}</h2> //바로 쓰면 됨 ㅇㅇ
</template>

• 비교
• 부모가 자식에게 데이터 전달 → props
• 부모가 후손들에게 → provide

• props의 값이 없으면 알아서 true로 값이 들어감