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

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

1 个答案: