slot

Component의 재사용성을 위해서 특정한 부분에 대해서 부모에서 자식으로 html을 보내고 싶을 때가 있을 수 있다. 물론 props로 보낼 수 있지만, 그럴 경우 불편함이 있다. 이러한 불편함을 해결해주는 것이 slot이다.

쉽게말해, 부모에서 자식컴포넌트로 content를 전달하고 싶을 때, slot을 사용하는 것이 유용하다.

 

<template>
  <app-form>
    <div class="help">
      <p>This is some help text.</p>
    </div>
    <div class="fields">
      <input type="text" placeholder="email">
      <input type="text" placeholder="username">
      <input type="password" placeholder="password">
    </div>
    <div class="buttons">
      <button type="submit">Submit</button>
    </div>
  </app-form>
</template>

<script>
import AppForm from "@/components/Form.vue";

export default {
  name: "App",
  components: {
    AppForm,
  }
}
</script>

<template>
  <form>
    <slot>No Form to render</slot>
  </form>
</template>

자식 Component에서 slot을 넣어, content가 들어갈 부분을 표시한다. slot 태그 안에 내용을 넣으면, 비어 있는 content에 대한 대체 content가 들어간다.

 

하지만, slot을 여러개로 나누고 싶을 때도 있을것이다.

그럴 경우,

<template>
  <app-form>
    <template v-slot:help>
      <p>This is some help text.</p>
    </template>
    <template v-slot:fields>
      <input type="text" placeholder="email">
      <input type="text" placeholder="username">
      <input type="password" placeholder="password">
    </template>
    <template v-slot:buttons>
      <button type="submit">Submit</button>
    </template>
    <p>Dummy Text</p>
  </app-form>
  <app-form>
    <template v-slot:help>
      <p>Contact help text.</p>
    </template>
    <template v-slot:fields>
      <input type="text" placeholder="name">
      <input type="text" placeholder="message">
    </template>
    <template v-slot:buttons>
      <button type="submit">Submit</button>
    </template>
  </app-form>
</template>

<script>
import AppForm from "@/components/Form.vue";

export default {
  name: "App",
  components: {
    AppForm,
  }
}
</script>

<template>
  <form>
    <div class="help">
      <slot name="help"></slot>
    </div>
    <div class="fields">
      <slot name="fields"></slot>
    </div>
    <div class="buttons">
      <slot name="buttons"></slot>
    </div>
    <slot></slot>
  </form>
</template>

부모에게 slot:[slot name속성]을 넣어서 어디 slot에 넣을 것인지를 구별하면 된다.

자식에게는 <slot name="이름">을 넣어서 표현한다.

 

또한, slot: 이 없는 content에 대해서는 자식에서 <slot>이라는 name 속성이 없는 곳에 위치하게 하면된다.