Vuejs2 如何在vue中将组件作为另一个组件的参数传递？

我有三个组件（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>

标题
{{component}}
导出默认值{
名称：‘A’，
道具：{
组成部分：{
要求：正确，
},
},
};

B部分

<template>
  c
</template>

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

C
导出默认值{
名称：‘B’，
};

成分C

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

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

你好，世界

导出默认值{
名称：‘B’，
};

因此，如果我将组件B作为组件a的属性传递，结果应该是：

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

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

标题
这就是内容

但如果我将组件C作为属性传递，结果应该是：

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

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

标题
你好，世界

我尝试在组件中创建属性并传递，但收到未定义的：

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

...

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

您应该能够使用Vue的“动态组件”执行您想要的操作。然后，您可以将组件的名称
B
或
C
作为道具传递给
a
，然后按以下方式使用它

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


标题
导出默认值{
道具：['dynamicComponent']，
}

实际语法是
或使用速记v-bind

有关更多信息，请参见此处的文档：