如何在运行时将插槽包装到作用域插槽中

如何解决如何在运行时将插槽包装到作用域插槽中

我有一个非常不寻常的情况。

urlMirror3

WrapperComponent应该管理InnerComponent的所有实例。但是我不知道将把什么编译到包装器组件中。

通常我会做这样的事情：

<WrapperComponent>
  <InnerComponent propA="Static"></InnerComponent>
</WrapperComponent>

但由于某些原因我不能这样做！

我需要能够在运行时创建广告位内容的多个实例。到目前为止，我已经创建了一个代码沙箱。

https://codesandbox.io/s/stupefied-framework-f3z5g?file=/src/App.vue:697-774

<WrapperComponent>
  <template scoped-slot="{data}">
    <InnerComponent v-for="(propB) in data" prop-b="Static" :prop-b="propB"></InnerComponent>
  </template>
</WrapperComponent>

这仅适用于静态信息，但每个插槽实例的数据也有所不同。

因为VNode是只读的，所以我无法修改this。$ slot.default.componentOptions.propsData。如果我忽略该警告，则结果将只是传递到该广告位的最后一个实例的内容。

解决方法

 <WrapperComponent>
  <WrapperSubComponent v-for="(propB) in data" key="probB" :prop-b="prop-b"> 
    <InnerComponent propA="Static"></InnerComponent>
  </WrapperSubComponent>
</WrapperComponent>

在将组件包装到另一个组件中并且仅执行一次逻辑之后工作。