在子组件中传递值槽

Question

是否有可能像这样在更深的嵌套子组件中访问Vue插槽?

<Parent>
<Child1>
<Child2>
Content
</Child2>
</Child1>
</Parent>

我想把HTML从父组件传递给更深层次的子组件。

Answer 1

使用作用域槽，我们可以遍历槽并向下传递它们

注意child-slot的名称;

# Parent
<template>
<Child1>
<template v-slot:child-slot>
Content
</template>
</Child1>
</template>
# Child 1
<template>
<Child2>
<template v-for="(index, name) in $scopedSlots" v-slot:[name]="data">
<slot :name="name" v-bind="data"></slot>
</template>
</Child2>
</template>
# Child 2
<template>
<div>
<slot name="child-slot">Fallback Content</slot>
</div>
</template>

Answer 2

vuejs3解决方案

@xyos的答案不工作与Vue 3由于一些广泛的变化，但它让我在正确的轨道上…经过一番搜索，我发现了一个(稍微麻烦一点的)解决方案;替换上面的Child1摘录:

<template>
<Child2>
<template v-for="(slot, index) of Object.keys($slots)" :key="index" v-slot:[slot]>
<slot :name="slot"></slot>
</template>
</Child2>
</template>

完全归功于这个答案。