Вставьте слот в экземпляр компонента

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> для загрузки компонентов динамически , вы можете передать свой компонент, используя специальный атрибут is.

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

Сценарий:

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