Vue : Slots: Techniques

What if you need to define multiple slots?

you need a component to have the ability to receive content in multiple slots. 

여러 슬롯에서 콘텐츠를 받아들일 수 있는 구성 요소가 필요합니다.

To accomplish this, you need to understand two concepts: named slots and template blocks.

이를 달성하려면 named slots과 템플릿 블록이라는 두 가지 개념을 이해해야 합니다.

 

What are named slots?

Named slots are a way to configure your slots so that they are unique from one another.

명명된 슬롯은 슬롯이 서로 unique 하도록 구성하는 방법입니다.

slots have a name property that allows you to designate it with a custom identifier.
슬롯에는 custom identifier.로 지정할 수 있는 이름 속성이 있습니다.

// below two snippets of code are identical.
// Using implicit naming
<template>
  <button>
    <slot></slot>
  </button>
</template>

// Using explicit naming
<template>
  <button>
    <slot name="default"></slot>
  </button>
</template>

The ability to name your slots is powerful when using multiple slots.

슬롯 이름을 지정하는 기능은 여러 슬롯을 사용할 때 강력합니다.

BlogLayout component responsible rendering out content in a certain style where content can be passed for the header, main, and footer section into different slots.

BlogLayout 구성 요소는 머리글, 기본 및 바닥글 섹션의 콘텐츠를 각각 다른 슬롯에 전달할 수 있는 것과 같이 각각의 콘텐츠를 특정 스타일로 렌더링할 수 있다.

 

BlogLayout.vue

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

how would this look when using the BlogLayout component?

BlogLayout 구성요소를 사용하면 어떻게 보일까요?

 

What is the template block?

<template> block should be used to define specific blocks of HTML that need to be passed into a slot by applying the v-slot directive to the template element. 

<template> 블록은 v-slot 지시문을 template 요소에 적용하여, 슬롯으로 전달이 필요한 특정 HTML 블록을 정의하는 데 사용되어야 합니다.

The v-slot directive can then take an argument which is the desired slot name you want the content to appear in.

그런 다음 v-slot 지시문은 콘텐츠를 표시하려는 원하는 슬롯 이름을 인수로 취할 수 있습니다.

 

App.vue

<template>
  <BlogLayout>
    <template v-slot:header>
      <h1>My Blog Title</h1>
    </template>
    <template>
      <p>Main body content</p>
    </template>
    <template v-slot:footer>
      <p>Footer content</p>
    </template>
  </BlogLayout>
</template>

 

What if I need to programmatically generate slot names?

There are situations where we need to programmatically generate our slots.

프로그래밍 방식으로 슬롯을 생성해야 하는 상황이 있습니다.

For example, an application may allow users to customize the layout, which is saved on the backend and our Vue.js application renders out what the API returns to us. 

예를 들어 애플리케이션을 통해 사용자는 레이아웃을 customize할 수 있으며, 이는 백엔드에 저장되고 Vue.js 애플리케이션은 API가 반환하는 내용을 가지고 렌더링합니다.

// Normal named slot
<template v-slot:header>...</template>

// Dynamic named slot
// Pass a variable by wrapped in square brackets.
<template v-slot:[dynamicSlotNameVariable]>...</template>

App.vue

<script>
export default {
  data() {
    return {
      layout: [
        { name: 'header', content: 'My Blog Title' },
        { name: 'body', content: 'Main body content' },
        { name: 'footer', content: 'Footer contet' }
      ]
    }
  }
}
</script>

<template>
  <BlogLayout>
    <template 
      v-for="section in layout" 
      v-slot:[section.name]
      :key="`blog-section-${section.name}`"
    >
      {{ section.content }}
    </template>
  </BlogLayout>
</template>

Does slots have a shorthand syntax?

v-slot has a shorthand syntax : #

v-slot에는 단축 구문이 있습니다: #

It can easily be mistaken for a CSS ID rather than something specific to the slot API in Vue.

Vue의 슬롯 API에 특정한 것이 아니,  CSS ID로 쉽게 오해될 수 있습니다.

 

App.vue

<template>
  <CustomLayout>
    <template #header>
      <p>Header content</p>
    </template>
    <template>
      <p>Main body content</p>
    </template>
    <template #footer>
      <p>Footer content</p>
    </template>
  </CustomLayout>
</template>