如何将插槽用于动态创建的vue组件

Question

我一直在动态地创建vue组件。但是我对动态Vue组件的插槽使用情况感到困惑。 插槽中分配的组件会在其父级属性更改时重置。

发布了两个沙箱

• 其中之一是通过其插槽在组件内部的组件。 （按钮>文本）https://codesandbox.io/s/dynamic-slot-one-level-ip8jo

• 另外一个是通过插槽（表>按钮>文本）的两级子组件https://codesandbox.io/s/dynamic-slot-two-level-1kdfy

第一个正在工作。当您单击“单击创建”按钮时，它将在Button组件的插槽内创建一个Text组件。然后在文本框中更改值，然后单击“ hi”按钮。您将看到button的数据已更改，文本框也不会丢失其值。

但是在第二个示例中，当更改值后单击“ hi”按钮时，您将看到文本框丢失其值（或重置为初始值）。

//Create Text inst.
var txt = new Text({
  parent: this,
  propsData: { text1: "hi internal" }
});
txt.$mount();
txt.$forceUpdate();

//Create Button inst.
var btn = new Button({
  parent: this,
  propsData: { type: "primary", text: "hi" }
});

//add eventHandler calling a method to change its prop.
btn.$on("test", () => btn.setText("a" + counter++));

//assign Text inst. to slot of Button
btn.$slots.default = [txt._vnode];
btn.$slots.default.forEach(function(vNode, index) {
  vNode.key = index;
});
btn.$mount();
btn.$forceUpdate();

//Create table inst.
var tbl = new Table({
  parent: this,
  propsData: { name: "sir john" }
});

//assign Button inst to slot of Table
tbl.$slots.default = [btn._vnode];
tbl.$slots.default.forEach(function(vNode, index) {
  vNode.key = index;
});
tbl.$mount();
tbl.$forceUpdate();

this.$refs.container.appendChild(tbl.$el);

对于该解决方案，我发现了一种解决方法，请看一下，您可以取消注释文本组件模板内的其他“ div”。 （text.vue） 然后第二个示例开始工作。

我尝试为插槽添加$ forceUpdate和_vnode键分配，但是它们都不像div解决方法那样工作。

我在这里是否缺少带有插槽的动态Vue组件的创建？