Vue : Slots: Fundamentals

Slots: Fundamentals

When you need to take your components to the next level beyond props, the use of slots is the next technique to enhance your components.

Props을 넘어 components를 다음 단계로 끌어올려야 할 때 슬롯을 사용하는 것은 components 를 향상시키는 다음 기술입니다.

Materials Objective 

• How to use slots for dynamic template code (basic slot)
• 동적 템플릿 코드를 위한 슬롯 사용 방법(기본 슬롯)
• How to set default slot content
• 기본 슬롯 콘텐츠를 설정하는 방법
• How to use multiple, named slots
• 여러 개의 명명된 슬롯을 사용하는 방법

What are slots?

slots are a custom Vue element that serve as distribution outlets for content.

슬롯은 콘텐츠 배포를 위한 사용자 정의 Vue 요소입니다

When you are working with HTML elements (e.g., div, span, p, etc.), they accept any kind of input provided:

HTML 요소(예: div,span,p 등)로 작업할 때, 제공된 모든 종류의 입력이 가능하다.

Regardless of whether you want to pass text or add other elements, the component renders as expected on the screen.

텍스트를 전달하려는지 또는 다른 요소를 추가하려는지 여부에 관계없이 components 는 화면에 예상대로 렌더링됩니다.

<!-- Just passing a string -->
<div>
  This is just normal text
</div>

<!-- Composing text with other HTML elements -->
<div>
  This is text with <strong>other HTML elements</strong>.
</div>

 

How to use slots?

Just add the slot element to your component’s template.

component  요소의 템플릿에 슬롯 요소를 추가하기만 하면 됩니다.

Can take a configuration heavy component into a flexible component using the same HTML element model

동일한 HTML 요소 모델을 사용하여 configuration이 많은 component를 flexible component 요소로 가져올 수 있습니다.

 

App.vue with BaseButton using props (slot 과 비교목적으로 사용함)

<template>
  <main>
    <BaseButton text="Cancel" />
    <BaseButton text="Submit" right-icon="right-arrow" />
  </main>
</template>

App.vue with BaseButton using slots

<template>
  <main>
    <BaseButton>Cancel</BaseButton>
    <BaseButton>Submit <span class="icon right-arrow"></span></BaseButton>
  </main>
</template>

 

Defining default content for a slot

This can be accomplished by defining the default content within the slot element of your component.

구성 요소의 슬롯 요소 내에 default 콘텐츠를 정의하여 수행할 수 있습니다.

if you wanted a button to have the text of “Submit” by default,

버튼에 기본적으로 "제출"이라는 텍스트가 포함되도록 하려면,

 

 

BaseButton.vue

Make a button to have the text of “Submit” by default

기본적으로 "제출"이라는 텍스트를 갖는 버튼을 만듭니다.

<template>
  <button class="button">
    <slot>Submit</slot>
  </button>
</template>

 

Content is provided to the component  to override the default content,

default  콘텐츠를 override 하기 위해 콘텐츠가 component 에 제공됩니다.

<!-- BaseButton with no custom content -->
<BaseButton></BaseButton>

<!-- Rendered BaseButton with no custom content -->
<button class="button">Submit</button>

<!-- BaseButton with custom content -->
<BaseButton>Cancel</BaseButton>

<!-- Rendered BaseButton with custom content -->
<button class="button">Cancel</button>

What if you need to define multiple slots?

There may be times where you need a component to have the ability to receive content in multiple slots.

여러 슬롯에서 콘텐츠를 받아들일 수 있는  기능을 갖는  component가 필요한 경우가 있을 수 있습니다.

Named slots and template blocks need to be understood in order to accomplish it.

이를 달성하려면 Named slots과 템플릿 블록을 이해해야 합니다.

 

What are named slots? 

Named slots is a way to configure your slots so that they are unique from one another by designating it with a custom identifier.

Named slots은 custom identifier.로 슬롯을 지정하여 슬롯이 unique 하도록 구성하는 방법입니다.

This custom layout component provides the flexibility to add whatever content required to the header, main, and footer section.

이 custom layout component는 머리글, 기본 및 바닥글 섹션에 필요한 모든 콘텐츠를 추가할 수 있는 유연성을 제공합니다.

 

CustomLayout.vue

<div class="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 CustomLayout component? To accomplish this, we need the template element. 

CustomLayout component를 사용하면 어떻게 보일까요? 이를 달성하려면 템플릿 요소가 필요합니다.

 

What is the template block?

Use template to define specific blocks of HTML that need to be passed into a slot.

템플릿을 사용하여 슬롯에 전달해야 하는 특정 HTML 블록을 정의합니다.

In order to do this, apply the v-slot directive ,taking an argument which is the desired slot name you want the content to appear in. 

이를 수행하려면 콘텐츠를 표시하기를 원하는 슬롯 이름을 인수로 사용하여, v-slot 지시어를 적용한다.

 

App.vue

<template>
  <CustomLayout>
    <template v-slot:header>
      <p>Header content</p>
    </template>
    <template>
      <p>Main body content</p>
    </template>
    <template v-slot:footer>
      <p>Footer content</p>
    </template>
  </CustomLayout>
</template>

Does slots have a shorthand syntax?

v-slot also 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. So use with caution!

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>

Resources

Content Distribution with Slots

https://vuejs.org/v2/guide/components.html#Content-Distribution-with-Slots

Components Basics — Vue.js