0

我有一个非常不寻常的场景。

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

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

通常我会做这样的事情：

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

但我不能这样做是有原因的！

我需要能够在运行时创建插槽内容的多个实例。我已经用我目前得到的东西创建了一个代码沙箱。

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

<template>
  <div id="app">
    <WrapperComponent>
      <InnerComponent propA="Static"></InnerComponent>
    </WrapperComponent>
  </div>
</template>

<script>
import Vue from "vue";

const WrapperComponent = Vue.extend({
  name: "WrapperComponent",
  data() {
    return {
      valueMap: ["Child 1", "Child 2"]
    }
  },
  render(h) {
    return h("div", {}, [
      this.valueMap.map(val => {
        console.log(val);
        
        for (const slot of this.$slots.default) {
          // this is a read only slot. I can not change this.
          // However, I want multiple instances of the slot
          // => Inject a scoped-slot
          slot.componentOptions.propsData.propB = val;
        }
        return h("div", {}, [this.$slots.default]);
      })
    ])
  }
});
const InnerComponent = Vue.extend({
  name: "InnerComponent",
  props: {
    // This is a static configuration value.
    propA: String,
    // This is a runtime value. The parent component manages this component
    propB: String
  },
  template: "<div>A: {{propA}} B: {{propB}}</div>"
});
export default {
  name: "App",
  components: {
    WrapperComponent,
    InnerComponent
  }
};
</script>

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

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

4

1 回答 1

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

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

于 2020-08-27T13:41:58.670 回答