Vue: 이미 정의된 슬롯 무시 슬롯 래퍼

Vue: 이미 정의된 슬롯 무시 슬롯 래퍼

Vue 오브젝트에는 정말 도움이 되는 멤버가 있다.$attrs. $attors가 하는 일은 현재 구성요소의 소품으로 인식되지 않는 모든 속성을 포함한다.의 좋은 예.$attrs여기 있다.

에 상응하는 것이 있는지 궁금하다.$attrs을 위해$scopedSlots나는 현재 https://stackoverflow.com/a/50892881/6100005의 첫번째 제안과 비슷한 접근방식을 사용하고 있다.와의 문제.$scopedSlots이미 정의된 슬롯도 통과하는지 여부.다음 예제를 사용하려면:

<template>
    <wrapper>
      <b-table :foo="foo" v-bind="$attrs" v-on="$listeners">
        <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope"><slot :name="slot" v-bind="scope"/></template>
      </b-table>
      <slot name="mySlot"></slot>
    </wrapper>
</template>

<script>
export default {
    props: {
        // let's pretend that `b-table` has a prop `foo` that is default `false`
        foo: {
            type: boolean,
            default: true,
        }
    }
}
</script>

---

지금foo의 행동 덕분에 두 번 묶이지 않을 것이다.$attrs그렇지만mySlot둘 다에게 보내질 것이다.wrapper그리고b-table.

내가 정의하고 있는 슬롯을 제외한 모든 슬롯을 어떻게 통과시킬 수 있을까?

내가 가지고 있는 한 가지 생각은

computed: {
   bTableSlots() {
       Object.keys(this.$scopedSlots)
          .filter( key => key!=='mySlot' )
          .reduce( (res, key) => (res[key] = this.$scopedSlots[key], res), {} );
    }
}

그리고 나서

        <template v-for="(_, slot) of bTableSlots" v-slot:[slot]="scope"><slot :name="slot" v-bind="scope"/></template>

더 좋은 방법이 없을까 하고.고마워!

내가 정의하고 있는 슬롯을 제외하고 어떻게 모든 슬롯을 넘길 수 있을까?

왜 이것이 문제라도 되는가? 만일<b-table>이름이 지정된 슬롯이 없음mySlot, 그것은 단지 그것을 무시할 것이다 - 결국 그것은 단지 그것안에 하나의 추가 항목일 뿐이다.$scopedSlots구성요소가 접근하지 못할 특성.그리고 범위 슬롯은 함수로 전달되기 때문에 추가 비용을 지불하지 않는다.

Vue 컴파일러가 슬롯의 내용을 볼 때(<template #slotName>)) 내용을 취합하여 다음과 같이 정리한다.Array의VNodes 또는 함수 반환Array의VNodes를 하위 구성요소로 전달한다.당신의 자녀 구성품이 그것을 더 이상 물려준다는 사실에는 추가 비용이 들지 않는다.기존 어레이에 대한 참조 또는 기존 기능(범위 슬롯의 경우)에 대한 참조로, 두 경우 모두 구성 요소가 정확히 동일한 이름의 슬롯에 대해 알지 못할 경우, 추가 비용이 발생하지 않음$scopedSlots...

만약 당신이 그것이 문제라고 느낀다면, 나는 필터링이 오직 당신 방식이나 어떤 도우미 배열을 통해서만 가능할까 두렵다.[ 'slot1', 'slot2' ]기존의 모든 정의b-table슬롯 및 기타 모든 항목 필터링(매번 구성 요소를 업데이트해야 하는 경우보다 나은 임호 없음)b-table새 슬롯 추가)...

나는 그 생각을 이해하고 있고 와의 유사성을 본다.$attrs- 다음과 같은 것이 있을 수 있다.$unknownSlots현재 구성 요소에 의해 정의되지 않은 슬롯을 고정하는 구성 요소에서 그러나 Vue 공용 API에는 현재와 같은 것이 없음...

참조URL: https://stackoverflow.com/questions/64213179/vue-wrapper-for-slots-ignoring-already-defined-slots