Как передать компонент в качестве параметра другого компонента в VUE?

Question

У меня есть три компонента (A, B и C), и мне нужно передать компонент B или C как свойство компонента A, и компонент B добавит этот компонент в свой шаблон, поэтому в этом случае я могу передать любой компонент.

Компонент A

<template>
  <div>
    <h1>header</h1>
    {{ component }}
  </div>
</template>

<script>
export default {
  name: 'A',
  props: {
    component: {
      required: true,
    },
  },
};
</script>

Компонент B

<template>
  c
</template>

<script>
export default {
  name: 'B',
};
</script>

Компонент C

<template>
  <p>Hello world!</p>
</template>

<script>
export default {
  name: 'B',
};
</script>

Итак, если я передам компонент B как свойство компонента A, результат должен быть:

<h1>header</h1>
<span>this is the content</span>

но если я передам компонент C как свойство, результат должен быть:

<h1>header</h1>
<p>Hello world!</p>

Я пытался создать свойство в компоненте A и передать его, но получил неопределенное:

<template>
   <A :component="component"></A>
</template>

...

props: {
  component: {
      template: '<B></B>',
    },
  },

Кто-нибудь знает, как это сделать?

ОБНОВЛЕНИЕ:

Наконец-то я использовал слот vue. https://vuejs.org/v2/guide/components-slots.html

Answer 1

Вы должны иметь возможность делать то, что вы хотите, с помощью «Динамических компонентов» Vue. Затем вы можете передать имя компонента B или C в качестве реквизита A и затем использовать его следующим образом.

<template>
   <div> 
     <h1>header</h1>
     <component v-bind:is="dynamicComponent"></component>
   </div>
</template>
<script>
  export default {
      props: ['dynamicComponent'],
   }
 </script>

Фактический синтаксис: <component v-bind:is="theComponentName"></component> или с сокращенным v-bind <component :is="theComponentName"></component>

Подробнее см. Здесь: https://vuejs.org/v2/guide/components.html#Dynamic-Components