是否可以将组件作为道具传递并在 Vue 的子组件中使用它？

Question

在 Vue 2.0 应用程序中，假设我们有组件 A、B 和 C。

A 声明、注册和使用 B

是否可以将 C 从 A 传递到 B？

像这样的东西：

 <template>
  <div class="A">
    <B :child_component="C" />
  </div>
</template>

并以某种方式在 B 中使用 C。

 <template>
  <div class="B">
    <C>Something else</C>
  </div>
</template>

The motivation: I want to create a generic component B that is used in A but receives from A its child C .实际上 A 将使用 B 多次将不同的’C’传递给它。

如果这种方法不正确，那么在 Vue 中正确的做法是什么？

回答@Saurabh

我没有作为道具传递，而是尝试了 B 内部的建议。

 <!-- this is where I Call the dynamic component in B -->

<component :is="child_component"></component>

//this is what I did in B js
components: {
 equip: Equipment
},
data () {
 return {
   child_component: 'equip',
   _list: []
 }
}

基本上我正在尝试渲染设备，但是动态方式

我在控制台中收到 3 个错误和一个空白页

[Vue 警告]：在 /home/victor/projetos/tokaai/public/src/components/EquipmentFormItem.vue 处渲染组件时出错：

未捕获的类型错误：无法读取未定义的属性“名称”

TypeError：无法读取未定义的属性“setAttribute”

显然我做错了什么

原文由 Victor Ferreira 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你可以使用特殊属性 is 来做这种事情。可以在 此处 找到动态组件及其用法的示例。

您可以使用相同的挂载点并使用保留元素在多个组件之间动态切换并动态绑定到其 is 属性：

您的代码将如下所示：

 <template>
  <div class="B">
    <component :is="child_component"> Something else</component>
  </div>
</template>

原文由 Saurabh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

加起来：

 <!-- Component A -->
<template>
  <div class="A">
    <B>
      <component :is="child_component"></component>
    </B>
  </div>
</template>

<script>
import B from './B.vue';
import Equipment from './Equipment.vue';

export default {
  name: 'A',
  components: { B, Equipment },
  data() {
    return { child_component: 'equipment' };
  }
};
</script>

<!-- Component B -->
<template>
  <div class="B">
    <h1>Some content</h1>
    <slot></slot> <!-- Component C will appear here -->
  </div>
</template>

原文由 Jonatas Walker 发布，翻译遵循 CC BY-SA 3.0 许可协议