Inflearn Community Q&A

안녕하세요 vuetify 강좌 기본,심화편 열심히 수강중인 수강생입니다!! 다름이 아니라 이 v-slot 문법이 궁금해서 여쭤드립니다.

보통 v-slot 문법을 사용하면 밑 코드와 같이

상위컴포넌트에서 v-slot을 이용하면

하위컴포넌트에서 slot태그의 name속성으로 지정된 이름에 맞게 연결시켜주는 걸로 알고있는데

  <!--상위컴포넌트-->
    <Header>      
      <template v-slot:forFirst="props">
        <p>Here is the first {{props.fromHeader}} </p>
      </template>
      <template #forSecond>
        <p>Here is the second</p>
      </template>
      <template >
        <p>Here is the third</p>
      </template>
    </Header>

  <!--하위컴포넌트-->
  <div>  
    <slot name= "forFirst" :fromHeader="title"></slot>
    <p> first</p>      
    <slot name= "forSecond"></slot>
    <p> second </p>
    <slot></slot>
    <p> third </p>      
  <br>
  </div>

강의에서는 navigation drawer 태그부분에서 gradient를 취할때

상위컴포넌트에서 v-slot을 이용하고

하위컴포넌트에서 slot태그를 이용하는 부분이 없어서 어떤 로직으로 진행되는지 궁금합니다 !!

<template v-slot:img="props">
   <v-img :gradient="gradient" v-bind="props"></v-img>
</template>