Vue : Scoped Slots: Part 2

Cover some of the limitations to scoped slots as well as alternative syntax for scoped slots.

scoped slots 의 일부 제한 사항과 대체 구문을 다룹니다.

 

Why it is called “scoped” slots

It provides the bookTitle data to the title slot, which we then access in our parent component:

Title slot에서  bookTitle 데이터를 제공하고, parent component 에서 title slot의  bookTitle에 액세스합니다.

Book.vue

<template>
  <div class="book">
    <slot name="title" :bookTitle="bookTitle" />
  </div>
</template>


<script>
export default {
  data() {
    return {
      bookTitle: 'Child Providing Data'
    }
  }
}
</script>

It provides the bookTitle data to the title slot, which we then access in our parent component:

title slot에서  bookTitle 데이터를 제공하면, parent component 에서 title slot의  bookTitle를 액세스합니다.

 

Library.vue

<template>
  <Book>
    <template v-slot:title="slotProps">
      <h1>{{ slotProps.bookTitle }}</h1>
    </template>
  </Book>
</template>


<script>
export default {
  computed: {
    uppercaseTitle() {
      // 🛑THIS DOES NOT WORK,because the data that the child is exposing to the parent is only scoped to the slot template block.
      this.slotProps.bookTitle.toUpperCase()
    }
  }
}
</script>

a common misconception is that it is now available to the parent component for use in things like methods, computed properties, or something else.

일반적인 오해는 이제 methods, computed properties 또는 기타 항목을  parent component 에서 사용할 수 있다는 것입니다.

But this will not work, because the data that the child is exposing to the parent is only scoped to the slot template block.

그러나 하위 항목이 상위 항목에 노출되는 데이터의 범위는 slot template block 으로만 한정되므로, 이는 작동하지 않습니다.

Rather than try to create a computed property in our Library.vue component, it would be more consistent to keep that logic inside of Book.vue instead and then expose it via slot props.

Library.vue component에서 computed property을 만드는 대신 Book.vue 내부에 해당 논리를 유지한 다음 slot props을 통해 노출하는 것이 더 일관성이 있습니다

 

Book.vue

Any data exposed via slot props is scoped to the slot template

<template>
  <div class="book">
    <slot name="title" 
      :bookTitle="bookTitle" 
      :uppercaseBookTitle="uppercaseTitle"
    />
  </div>
</template>


<script>
export default {
  data() {
    return {
      bookTitle: 'Child Providing Data'
    }
  },
  computed: {
    uppercaseTitle() {
      return this.bookTitle.toUpperCase()
    }
  }
}
</script>

Destructuring slot props

Library.vue (before)

<template>
  <Book>
    <template v-slot:title="slotProps">
      <h1>{{ slotProps.bookTitle }}</h1>
    </template>
  </Book>
</template>

Destructuring 을 이용하여  code 를 아래와 같이 간결하게 할 수 있다.

Library.vue (after)

<template>
  <Book>
    <template v-slot:title="{ bookTitle }">
      <h1>{{ bookTitle }}</h1>
    </template>
  </Book>
</template

Single v-slot abbreviated shorthand

Library.vue (before v-slot abbreviated shorthand)

<template>
  <Book>
    <template v-slot:title="{ bookTitle }">
      <h1>{{ bookTitle }}</h1>
    </template>
  </Book>
</template>

Library.vue (with v-slot abbreviated shorthand)

Apply the v-slot directive directly to the component directly and remove the template blocks.

v-slot 지시문을 구성 요소에 직접 적용하고 템플릿 블록을 제거합니다.

<template>
  <Book v-slot:title="{ bookTitle }">
    <h1>{{ bookTitle }}</h1>
  </Book>
</template>

Library.vue (with multiple slots and incorrect syntax)

The moment you need to use another slot, this does not work. 

<template>
  <Book v-slot:title="{ bookTitle }">
    <h1>{{ bookTitle }}</h1>    
    <!-- 🛑THIS DOES NOT WORK -->
    <template v-slot:description>
      <p>My Description</p>
    </template>
  </Book>
</template>

Library.vue (with multiple slots)

Recommend that as a best practice, just stick with template blocks when using slots.

슬롯을 사용할 때 템플릿 블록만 사용하는 것이 가장 좋습니다.

<template>
  <Book>
    <template v-slot:title="{ bookTitle }">
      <h1>{{ bookTitle }}</h1>
    </template>
    <template v-slot:description>
      <p>My Description</p>
    </template>
  </Book>
</template>