0

在高层次上，假设我有：

<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>

通过这种方式，我可以从父级范围传递任意数据，并且直接子级可以访问该数据。但是，如果孩子也有插槽，则该孩子的孩子将失去祖父母插槽的上下文（除非我手动从孩子公开其插槽模板中来自父母的数据，我猜）。这些嵌套插槽甚至可以深入到曾孙。

有没有一种解决方案可以让曾孙子女的道具值可以使用父数据？

4

1 回答 1

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>
于 2021-11-04T02:27:21.593 回答