네스트된 Vuej 슬롯: 슬롯을 손자녀에게 전달하는 방법

네스트된 Vuej 슬롯: 슬롯을 손자녀에게 전달하는 방법

v-menu와 같은 다양한 vuetify 구성 요소를 사용합니다.다음과 같은 템플릿이 있습니다.

<v-menu>
  <a slot="activator">menu</a>
  <v-list>
    <v-list-tile>Menu Entry 1</v-list-tile>
    <v-list-tile>Menu Entry 2</v-list-tile>
  </v-list>
</v-menu>

그 주위에 다른 래퍼를 추가한다고 가정합니다.이 컴포넌트는 몇 가지 메뉴 옵션이 미리 정의된 특별한 메뉴 컴포넌트입니다.그리고 액티베이터 슬롯도 있었으면 좋겠어요.그리고 마지막은 원래 v-menu 액티베이터 슬롯에 할당해야 합니다.가능합니까?

예:

// index.vue: 
<template>
  <my-special-menu>
    <button>My special menu trigger</button>
  </my-special-menu>
</template>

// MySpecialMenu.vue
<template>
  <v-menu>
    <slot slot="activator"/> <-- I don't know how to write this line
    <v-list>...</v-list>
  </v-menu>
</template>

<slot slot="activator">잘못된 방정식입니다.목적은 부모로부터 콘텐츠를 꺼내는 것입니다(즉,<button>..</button>이 예에서는)로 사용합니다.slot="activator"v-menu에 있습니다.

이렇게 쓸 수 있어요.

<v-menu>
  <a slot="activator"><slot/></a>
  ...
</v-menu>

그러나 이 경우 결과 템플릿은 다음과 같습니다.

<div class="v-menu__activator">
  <a>
    <button>My special menu trigger</button>
  </a>
</div>

그건 내가 원하는게 아니야.제거할 수 있습니까?<a>여기 포장지?

업데이트: 다음과 같은 구조를 사용할 수 있습니다.<template slot="activator"><slot name="activator"/></template>손녀에게 시간을 좀 주려고요하지만 슬롯이 여러 개 있는데 모두 프록시하려면 어떻게 해야 할까요?이는 inheritAttrs 및v-bind="$attrs"슬롯의 경우.현재 가능한가요?

예를 들면...<v-autocomplete>추가, 프리펜드, 라벨, 데이터 없음, 진행률, 항목, 선택 슬롯 등이 있는 컴포넌트 in vuetify.여기에서는 래퍼 컴포넌트를 몇 가지 쓰고 있는데, 현재 다음과 같이 되어 있습니다.

<template>
  <v-autocomplete ..>
    <template slot="append"><slot name="append"/></template>
    <template slot="prepend"><slot name="prepend"/></template>
    <template slot="label"><slot name="label"/></template>
    ...
    <template slot="item" slot-scope="props"><slot name="item" v-bind="props"/></template>
  </v-autocomplete>
</template>

여기서 모든 슬롯의 열거를 회피할 수 있습니까?

를 붙이면slot이 html 요소는 하위 컴포넌트에 전달되어 슬롯에 해당 이름이 채워집니다.html 요소를 전달하고 싶지 않은 경우 다음을 사용할 수 있습니다.slot에서template태그를 지정합니다.템플릿 태그는 요소를 그룹화하지만 html 요소로 렌더링하지 않습니다.이것은 여기서 매우 적합합니다.v-if에서 요소를 그룹화하거나 v-for로 여러 요소를 반복하는 등의 다른 작업에도 템플릿 태그를 사용할 수 있습니다.

// App.vue
<template>
  <div id="app">
    <test>
      <template slot="activator">
        Click <b>me</b>!
      </template>
    </test>
  </div>
</template>

// Test.vue
<template>
  <div class="wrapper">
    <grand-child>
      <template slot="activator">
        <slot name="activator"></slot>
      </template>
    </grand-child>

    This is some text
  </div>
</template>

// GrandChild.vue
<template>
  <div>
    <a href="#" @click="toggle = !toggle">
      <slot name="activator">Default</slot>
    </a>

    <div v-if="toggle">This appears and disappears</div>
  </div>
</template>

편집: 임의의 슬롯에 대해 이 작업을 수행하는 경우에도 가능합니다. this.$slots에는 슬롯과 그 컨텐츠가 포함되어 있기 때문에, 다음과 같은 것으로, 같은 이름의 슬롯에 슬롯의 컨텐츠를 전달할 수 있습니다.

<grand-child>
  <template v-for="(_, slot) in $slots">
    <template :slot="slot">
      <slot :name="slot"></slot>
    </template>
  </template>
</grand-child>

완전성을 확보하기 위해 스코프 슬롯에는$scopedSlots다음과 같이 전파됩니다.

<grand-child>
  <template v-for="(_, slot) in $scopedSlots" v-slot:[slot]="props">
    <slot :name="slot" v-bind="props" />
  </template>
</grand-child>

^{출처와 코멘트}

감가상각으로 인해 EsLint 오류가 발생하였습니다.:slot그리고.$scopedSlots특성.

그래서 @Sumurie8의 답변을 이렇게 조합하면 효과가 좋습니다.

<template v-for="(_, slot) in $slots" v-slot:[slot]>
  <slot :name="slot"></slot>
</template>

이름 있는 슬롯과 이름 없는 슬롯이 모두 소품인 경우:

Vue 3

<template v-for="(_, name) in $slots" #[name]="slotData">
  <slot :name="name" v-bind="slotData || {}" />
</template>

타이프스크립트 버전

<template v-for="(_, name) in ($slots as {})" #[name]="slotData">
  <slot :name="name" v-bind="slotData || {}" />
</template>

언급URL : https://stackoverflow.com/questions/53430731/vuejs-nested-slots-how-to-pass-slot-to-grandchild