是否可以将组件作为道具传递并在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>

动机：我想创建一个通用组件B，它在a中使用，但从a其子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 warn]：在/home/victor/projetos/tokaai/public/src/components/EquipmentFormItem.Vue中呈现组件时出错：

无法读取未定义的属性名称

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

显然我做错了什么

Answer 1

下面是通过另一个组件的道具转发自定义组件的解决方案

： is是一个特殊的属性，它将被用来替换您的实际组件，如果您试图在组件中使用它作为道具，它将被忽略。幸运的是，您可以使用其他东西，如el，然后将其转发到组件，如：

<template>
  <div>
    <component :is="el">
      <slot />
    </component>
  </div>
</template>
<script>
  export default {
    name: 'RenderDynamicChild',
    props: {
        el: {
            type: [String, Object],
            default: 'div',
        },
    },
  }
</script>

在el属性中使用的任何有效元素都将用作子组件。默认情况下，它可以是html或对自定义组件或组件声明中指定的div的引用。

将自定义组件传递给prop有点棘手。人们会假设您在父组件的组件属性中声明，然后将其用于el属性，但这不起作用。相反，您需要将您的动态组件放在data或comated属性中，以便您可以在模板中使用它作为道具。还要注意，不需要在组件属性中声明。

<template>
  <RenderDynamicChild :el="DynamicComponent">
    Hello Vue!
  </RenderDynamicChild>
</template>

<script>
import RenderDynamicChild from './DynamicChild';
import AnotherComponent from './AnotherComponent';

export default {
  name: "ParentComponent",
  components: { DynamicChild },
  data() {
    return {
      DynamicComponent: AnotherComponent,
    };
  },
};
</script>

为您的动态组件使用计算属性可以让您轻松地在组件之间切换：

<script>
import DynamicChild from './DynamicChild';
import AnotherComponent from './AnotherComponent';

export default {
  name: "ParentComponent",
  components: { DynamicChild },
  data() { return { count: 0 } },
  computed: {
    DynamicComponent() {
      return this.count % 2 > 1 ? AnotherComponent : 'article';
    },
  },
};
</script>

增加this.count以在AntherComponent和简单的文章html元素之间交替。

Answer 2

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

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

您的代码如下所示：

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

Answer 3

总结：

<!-- 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>