将插槽插入组件实例

Question

我有Component1

<template>
<div> <slot></slot> </div>
</template

<script>
export default {}
</script>

和Component2

<template>
<div> {{ someProp }} </div>
</template

<script>
export default {
    props: {
        someProp: String
    }
}
</script>

并且我想使用这些动态创建这些组件

var Comp1 = Vue.extend(Component1)
var Comp2 = Vue.extend(Component2)

var instance1 = new Comp1()
var instance2 = new Comp2()

如何将instance1的广告位设置/插入为instance2？我的本能就是这样做

instance1.$slots.default = instance2

但是在DOM中，instance1中的广告位显示为undefined。

Answer 1

您必须使用<slot>吗？ Vue带有一个名为<component>的指令，用于加载组件dinamically，您可以使用is特殊属性来传递组件。

<template>
<div>
    <component :is="dynamicComponent">
</div>
</template>

脚本：

export default {
  computed: {
    dynamicComponent(){
      return Comp2 //the class, not the instance
    }
  }
}