Skip to content

Instantly share code, notes, and snippets.

@Misaka-0x447f
Created December 17, 2019 13:16
Show Gist options
  • Save Misaka-0x447f/83295ffea60be34c76f551e06b8c5932 to your computer and use it in GitHub Desktop.
Save Misaka-0x447f/83295ffea60be34c76f551e06b8c5932 to your computer and use it in GitHub Desktop.
Creating transparent slot

outer, where scope pointed to the most deep child component, customer.

<layer1>
    <template v-slot:slotName="scope">
        {{scope}}
    </template>
</layer1>

layer1, where the slot name defined by parent.

<layer2>
    <template v-for="(_, slotKey) in $scopedSlots" v-slot:[slotKey]="scope">
        <slot :name="slotKey" v-bind="scope"/>
    </template>
</layer2>

layer2, where the slot spreaded to every consumer component.

<consumer v-for="value in structure">
    <template v-slot="scope">
        <slot :name="value" v-bind="scope">
    </template>
</consumer>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment