vue.js - 将插槽插入组件实例

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

如何设置/插入插槽instance1as instance2？我的直觉是这样做

instance1.$slots.default = instance2

但在 DOM 中，插槽instance1显示为undefined.

标签： vue.jsvuejs2

Answer 1

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

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

剧本：

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