컴포넌트

slot

fallback content 기존의 컨텐츠 대신사용하는 데이터
슬롯이 있어야 데이터(banana) 입력 받을수 있음

이름을 갖는 슬롯 = 순서보장

App.vue
<template>
    <MyBtn >
        //v-slot 약어가 #임
    	<template #:text> 
          <span>Banana</span>
        </template>
        
        //위 아래 순서가 바뀌어도 슬롯 이름이 지정되있어
        //출력 순서가 보장된다.
        <template #:icon> 
            <span>(B)</span>
        </template>

    </MyBtn>

</template>

Mybtn.vue
<template>
    <div class= "btn">
		<slot name = "icon"></slot> //이름을 가지는 슬롯지정
        <slot name = "text"></slot>
	</div>

</template>

provide inject

일반적으로 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해야 할 때 props를 사용

그러나 부모-> 자식-> 자식-> 자식컴포넌트로 데이터를 전달하면 각각 컴포넌트에서 props작업을 해줘야함. 노가다임
provide inject : 중간 컴포넌트를 거치치 많고 자식 컴포넌트에 데이터 삽입 가능

다만 provide 한 데이터는 inject했을때 반응성이 없다.(데이터를 변경해도 반응X)
반응성 추가작업이 필요하다 -> computed

부모 컴포넌드
import { computed } from 'vue'


export default {

	data() {
    	return {
        	message : "~~~~~"
        }
    }
    provide() { //데이터 바로 제공
    	return {
        	msg: computed(() => { // 반응성 작업
            	return this.message
            })
        }
    }
  
}

자식 컴포넌트
<template>
	<div>
    	child: {{msg.value}} //value 를써야 반응성 적용댐.
    </div>
</template>
<script>
export default {
	inject : ['msg'] //데이터 삽입
}
</script>

다만 변경해도 인젝트 데이터는 변경 x
반응성 추가작업이 필요 computed

Ref

개발자가 DOM 엘리먼트에 직접 접근해야 하는 경우 ref라는 특별한 속성을 사용

document.quertSelector 대신 사용하는 기능임

<template>
	<Hello ref = "hello" /> // id = "hello"대신 사용
</template>

<script>
	import hello from '컴포넌트 경로'
    
    export default{
    	components:{
        	Hello
        }
        
        mounted() {
        	console.log(this.$refs.hello.$refs.good)
            //이렇게 꼬리물고 들어가기 가능. 
            //컴포넌트 하나일떄 $el, 여러개일때 $refs.이름
        }
    }
</script>

<template>
	<h1> Hello~</h1>
    <h1 ref = "good"> Hello~</h1> // id = "good"대신 사용
</template>