Vue.js: Vue 문법 Ep.9 컴포넌트2

06 Feb 2023 • TIL

컴포넌트: Slot

Vue.js: 슬롯

  • Fallback contents

App.vue(부모 컴포넌트) 파일에서 MyBtn 컴포넌트 태그 사이에 컨텐츠가 없을 때, MyBtn.vue(자식 컴포넌트) 파일의 slot 태그 사이에 있는 컨텐츠가 출력되는 것을 말한다.

  • 이름을 갖는 슬롯 (Named Slots)

    slot에 name 속성을 부여해서 순서가 어떻게 되었던 간에 해당 slot의 이름 순서에 맞게 화면에 출력하도록 만들어 준다.

    <template>
  <MyBtn>
    <template
      v-slot:
      icon>
      <span>(B)</span>
    </template>
    <template #text>
      <span>Banana</span>
    </template>
  </MyBtn>
</template>

    v-slot을 통해서 원하는 컨텐츠에 이름을 지정해준다.
    이때, v-slot을 축약하여 ‘#’ 으로 작성할 수 있다.

    <template>
  <div class="btn">
    <slot name="icon"></slot>
    <slot name="text"></slot>
  </div>
</template>

    App.vue 파일에서 icon과 text의 순서가 뒤바뀌어도 MyBtn에서는 slot의 순서가 icon이름을 갖는 것이 가장 먼저이기 때문에 icon 이름을 갖는 컨텐츠가 먼저 출력된다.

More …