• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

v-slot 문법 관련 질문

22.09.21 15:46 작성 조회수 170

0

안녕하세요 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>

 

답변 1

답변을 작성해보세요.

0

안녕하세요 :)
하위 컴포넌트(v-navigation-drawer) 내부에서 이용하고 있습니다.

아래 Github 링크 남겨드립니다. 궁금 하신 부분 참고가 되었으면 합니다.
Vuetify Github VNavigationDrawer.ts : 321 Line

아울러
v-nagigation-drawer API 스팩도 함께 보내드립니다.

 

 

아 이해했습니다!! 감사합니다 :)