<보완필요>♣[Vue] 컴포넌트 심화(slot/

단일 슬록(slot)

 

부모 컴포넌트에서 자식 컴포넌트로 HTML 마크업을 전달할 수 있게 해준다.
자식 컴포넌트 태그 내에 지정한 컨텐츠를 전달한다.

 

 

<App.vue> 부모 컴포넌트

<template>
  <FancyButton>
    <button class="fancy-btn">
      클릭하기23 <!-- 슬롯 컨텐츠 -->
    </button>
  </FancyButton>
</template>

<script>
import FancyButton from './FancyButton.vue'
  
export default {
  components: { FancyButton }
}
</script>

자식 컴포넌트인 FancyButton 을 import 해주고, 컴포넌트 태그<FancyButton>안에 보내고자 하는 컨텐츠 입력

버튼 클래스인 fancy-btn도 자식 컴포넌트에 설정해준 클래스이다.

 

button빼고 text만 입력후, 자식 컴포넌트에 button입력하고 안에 slot해서 text만 보낼수도있다

 

 

<FancyBitton.Vue> 자식 컴포넌트

<template>
  <div>
    <div>
      <slot></slot>
    </div>
     <div>
      <slot></slot>
    </div>
   </div>
</template>

<style>
.fancy-btn {
  color: #fff;
  background: linear-gradient(315deg, #42d392 25%, #647eff);
  border: none;
  padding: 5px 10px;
  margin: 5px;
  border-radius: 8px;
  cursor: pointer;
}
</style>

 

결과물 

 

이름이 있는 slot (named slot)

 

슬롯에 이름을 부여하여 여러 개의 슬롯으로 작성한다.
부모 컴포넌트에서 지정한 컨텐츠가 해당 이름의 슬롯으로 전달된다.

 

 

<App.vue> 컴포넌트

 

<template>
  <BaseLayout>

      <h1 slot="header">header 슬롯</h1>
      <p slot="main">main 슬롯</p>
      <p slot="test">test 슬롯</p>
      <p>default 슬롯</p>
      <p slot="footer">footer 슬롯</p>

  </BaseLayout>
</template>

<script>
import BaseLayout from './components/BaseLayout.vue'
  
export default {
  components: {
    BaseLayout
  }
}
</script>

 

slot="이름" 에서 각 slot의 이름으로 자식컴포넌트와 파싱한다. 이름을 안주면 default로 명명된다.

 

<BaseLayout.vue> 컴포넌트

 

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

<style>
  footer {
    border-top: 1px solid #ccc;
    color: #666;
    font-size: 0.8em;
  }

  main {
    color :red;
  }
</style>

name="이름"에서 각 이름으로 파싱된 slot 컨텐츠들이 나오며, 명명되지않아 defalut된 slot은 name="default"로 파싱되는 것을 볼 수 있다. 마찬가지로 자식컴포넌트에서 slot에 name을 안주면 기본 default로 명명되어 파싱된다.

 

<결과 페이지>

자식 컴포넌트에 "test"로 명명되어진 slot이 없기때문에 slot="test"를 제외한 나머지 slot들이 파싱되어 나온다.

 

범위 슬록