[vue] vue slot

📖 vue slot 이란?

사용할 컴포넌트 안에 커스텀 할 html을 추가 하고 싶을 때 사용

사용할 컴포넌트 안의 원하는 곳에 slot을 추가

✔ 사용방식

- index.vue

<template>
  <!-- 사용자 지정 텍스트 제공 -->
  <SubmitButton>저장</SubmitButton>
</template>

-submitButton.vue

<template>
  <button type="submit">
	  <slot>
    	슬롯 자리로 저장이 감 
  	</slot>
	</button>
</template>

name이 있는 슬롯

- index.vue

<template>
  <BaseLayout>
    <template #header>
      <h1>다음은 페이지 제목일 수 있습니다.</h1>
    </template>

    <template #default>
      <p>주요 내용에 대한 단락입니다.</p>
      <p>그리고 또 하나.</p>
    </template>

    <template #footer>
      <p>다음은 연락처 정보입니다.</p>
    </template>
  </BaseLayout>
</template>

- Baselayout.vue

<template>
  <div class="container">
    <header>
      <slot name="header"></slot>
    </header>
    
    <main>
      <slot></slot>
    </main>
    
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

슬롯을 사용하는 하위 컴포넌트에 데이터 전송

부모에서 자식으로

- index.vue

<template>
	<MyComponent :data ="data"> 
	</MyComponent>
</template>


- children.vue

<template>
	<div>
     <slot id = data></slot>
    </div>
</template>

props : {
 data : string
}

자식에서 부모로

- index.vue

<template>
	<MyComponent v-slot="slotProps">
  		{{ slotProps.text }} {{ slotProps.count }}
	</MyComponent>
</template>

- MyComponent.vue
<div>
  <slot :text="greetingMessage" :count="1"></slot>
</div>

단 서로의 데이터에 관섭 할 수 없음. 업데이트 불가능