如何使嵌套插槽的道具（Vue 2）可以訪問父數據？

Question

在高層次上，假設我有：

<parent>
    <template v-slot:content="{foo, bar}"> // foo/bar are just data from parent that contains "FOO" / "BAR"
         <child :v-text="foo" :someprop="bar === 'BAR'"> // foo and bar are accessible here
              <template v-slot:content>
                  <grandchild :v-text="foo" :someprop="bar === 'BAR'"> // foo and bar are no longer accessible here
                  </grandchild>
              </template>
         </child>
    </template>
</parent>

通過這種方式，我可以從父級范圍內傳遞任意數據，而直接子級可以訪問該數據。 但是，如果孩子也有插槽，那么該孩子的孩子將失去祖父母插槽的上下文（除非我手動從孩子那里公開來自其插槽模板中的父母的數據，我猜）。 這些嵌套的插槽甚至可以更深入地用於曾孫。

有沒有辦法讓父數據可用於曾孫輩的道具值？

Answer 1

您可以在中間組件內的父級槽模板內創建命名槽。

此示例將項目屬性傳遞回子項

父組件

<slot name='content' :item='item'>
  Replace Me
</slot>

中間組件

<parent>
  <template #content='{item}'>
    <slot name='content' :item='item' />
  </template>
</parent>

子組件

<middle>
  <template #content='{item}'>
    the item is {{item}}
  </template>
</middle>