在子組件中傳遞 vue 插槽

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>