slot-scope(v-slot)

slot-scope 는 뭐야?

슬롯(slot)이 컴포넌트 템플릿의 재사용성을 늘려주기 위한 기능이라면 스콥드 슬롯(Scoped slot)은 컴포넌트 데이터의 재사용성을 높여주는 기능입니다. 일반적으로 뷰에서는 프롭스 속성이나 이벤트 발생과 같은 컴포넌트 통신 방식을 제외하고는 다른 컴포넌트의 값을 참조할 수 없습니다. 하지만 스콥드 슬롯은 하위 컴포넌트의 값을 상위 컴포넌트에서 접근하여 사용할 수 있습니다.

(참조: 장기효님)

 

<!-- Child Component -->
<slot :상위 컴포넌트로 전달할 속성 이름="하위 컴포넌트의 데이터"></slot>

<!-- Parent Component -->
<child-component>
  <template v-slot="임의의 변수">
    {{ 임의의 변수 }}
  </template>
</child-component>

 

Example 설명

slot 안에 있는 자식 컴포넌트의 이벤트 값을 받아서 부모 컴포넌트의 값을 바꿔줘야 했다.

자식 컴포넌트(Mdi.vue)에서 slot-scope에 hiddenActive 함수를 참조 할 수 있게 넣어줬다.

부모 컴포넌트에서는 자식 컴포넌트에서 slot-scope로 넘겨줬던 함수를 v-slot 로 함수를 받아 사용할 수 있게 가져왔고,

그 함수를 다시  slot 영역 안에 있는 다른 자식 컴포넌트에 props 로 넘겨줬다.

이렇게 slot 안에 있는 컴포넌트에서 이벤트를 발생키더라도 부모 컴포넌트에서 그 이벤트로 인해 발생한 상태 값을 사용할 수 있게 되었다.

 

원래는 자식 컴포넌트에서 커스텀 이벤트(emit)를 <slot @커스텀이벤트="실행할 이벤트"></slot>  이렇게 하면 될 줄 알았지만 정상적으로 작동하지 않았다.

그래서 조금은 복잡해졌지만 slot-scope를 사용하게 됐던 것이다.

 

 

<!-- Child Component (Mdi.vue)  -->
<template>
  <div class="mdi" :class="{ 'is-hidden': active }">
    <div class="mdi__inner">
      <slot :hiddenActive="hiddenActive"></slot>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const active = ref(false);
const hiddenActive = () => {
  active.value = !active.value;
};
</script>

<!-- Parent Component -->
<!-- slot-scope 값을 {} 중괄호로 묶은 것은 slot 안에 하나의 값이 아니라 여러 개의 값이 있을 수 있기 때문에 묶어 준 것이다 -->
<Mdi v-slot="{ hiddenActive }">
  <MdiNav />
  <MdiShortCuts :hiddenToggle="hiddenActive" />
</Mdi>

<template>
  <!-- Child Component(MdiShortCuts.vue) -->
  <button class="mdiShortCuts__hidden" @click="hiddenToggle">
    MDI 숨김 버튼
  </button>
</template>

<script setup>
import { ref, onMounted } from 'vue';
defineProps({
  hiddenToggle: Function,
});
</script>