탭 구성 요소에 대한 Vue의 슬롯 적용

저는 최근에 Vue 및 Nuxt.js 에서 Udemy 과정을 완료했습니다.
Vaccine Tracker 을 빌드하기 위해 이 프레임워크를 테스트하기로 결정했습니다. React에 대한 배경 지식이 있어 학습이 원활하고 자연스럽습니다.

믿을 수 없을 정도로 다재다능한 요소는 슬롯입니다. 처음부터 나는 그것들이 어떻게 복잡하고 동시에 다양한 레이아웃의 건설에 사용될 수 있는지 궁금했습니다. 예를 들어 탭 구성 요소.

탭 구성 요소 구현

소품으로 표시할 모든 탭의 목록을 수신하는 것으로 충분합니다.
상태에서 활성화된 탭을 추적하는 것으로 충분합니다.
마지막으로 다른 탭을 클릭할 때 트리거되는 메서드가 필요합니다.

<script>
import Vue from 'vue'

export default Vue.extend({
  props: {
    labels: {
      type: Array,
      require: true,
    },
  },
  data() {
    return {
      activeLabel: this.$props.labels[0],
    }
  },
  methods: {
    onLabelClick(label) {
      this.activeLabel = label
    },
  },
})
</script>

지금까지 (구문은 제쳐두고) 다른 프레임워크와 다르지 않습니다. 그러나 마법은 템플릿에서 발생합니다.

<template>
  <div>
    <div v-for="label in labels" :key="label" @click="onLabelClick(label)">
      {{ label }}
    </div>
    <slot :name="activeLabel">Default {{ activeLabel }}</slot>
  </div>
</template>

그게 다야. 각 탭을 표시하는 한 번의 반복. 아래는 탭 중 하나를 클릭할 때 name가 업데이트되는 슬롯입니다.

For the purposes of this post I ignore the style. You can get fancy!

탭 구성 요소 사용

이 구성 요소를 사용하려는 모든 위치에서 다음과 같이 하십시오.

<Tabs :labels="['one', 'two', 'three']">
          test
          <template #one>
            <div>Uno</div>
          </template>
          <template #two>
            <div>Due</div>
          </template>
          <template #three>
            <div>Tre</div>
          </template>
        </Tabs>

다른 템플릿 중에서 활성 탭과 관련된 템플릿만 표시됩니다.
몇 줄의 라인이 어떻게 이렇게 다양한 행동으로 이어질 수 있는지 놀랍습니다.


읽어 주셔서 감사합니다,
Repo 📑

마음에 드시면 연락주세요
🐙 및