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

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

A声明、注册和使用B

能把C从A转到B吗

大概是这样的：

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

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

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

[Vue warn]：在/home/victor/projetos/tokaai/public/src/components/EquipmentFormItem.Vue中呈现组件时出错：

未捕获的TypeError:无法读取未定义的属性“name”

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

---

显然我做错了

你可以使用特殊属性

is

来做这种事情。可以找到动态组件的示例及其用法

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

您的代码如下所示：

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

<script>
  import Vue from 'vue'
  import childComponent from './childComponent'
  Vue.component('child-component')
  export default {}
</script>


<template functional>
  <div>
    <child-component/>
  </div>
</template>

别的

总结：

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

从“/B.vue”导入B；
从“/device.vue”导入设备；
导出默认值{
名称：‘A’，
组成部分：{B，设备}，
数据（）{
返回{子组件：'设备'}；
}
};
一些内容

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

：is

是特殊属性，它将用于替换实际组件，如果您尝试将其用作组件中的道具，它将被忽略。幸运的是，您可以使用类似于

el

的其他内容，然后将其转发到

组件，如下所示：

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

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

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


从“./DynamicChild”导入DynamicChild；
从“./AnotherComponent”导入另一个组件；
导出默认值{
名称：“父组件”，
组件：{DynamicChild}，
data（）{return{count:0}}，
计算：{
DynamicComponent（）{
返回此。计数%2>1？另一个组件：“文章”；
},
},
};

增加
this.count
以在
另一个组件
和简单的
文章
html元素之间交替使用。
如果您想在功能组件中使用另一个组件，可以执行以下操作：

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

<script>
  import Vue from 'vue'
  import childComponent from './childComponent'
  Vue.component('child-component')
  export default {}
</script>


<template functional>
  <div>
    <child-component/>
  </div>
</template>


从“Vue”导入Vue
从“./childComponent”导入childComponent
Vue.component（“子组件”）
导出默认值{}

参考：
我不在这里工作，但我不知道到底发生了什么事。我会用更多的信息更新我的问题，就像魔咒一样！谢谢我只是想知道是否可以用传递的组件来设置道具的自定义类型，而不是
Object
type？类似于：
passedComponent:{type:Component，required:true}，
另外，是否可以在通过prop接收此组件的组件中获取已传递组件的名称？是否确定这些错误仅来自这些代码，您在哪里使用
setAttribute
或
name
属性？必须是某个内部进程。我不是在这个应用程序中这样做的。这个工作非常好，谢谢。我对此进行了跟进。现在假设组件C发出一个事件，我想在组件B中对其进行操作。我尝试使用v-on-on来监听它，但没有成功。我有什么选择？知道答案了！我只需在祖父母中侦听事件，即，而不是在正在注入事件的插槽中侦听事件。我们必须在有``标记的位置导入所有子组件。如果我们只需要来自父级的特定子组件，这不会让它变得更慢吗。是否有任何变通方法可以将组件导入父级并传递给子级？
<script>
  import Vue from 'vue'
  import childComponent from './childComponent'
  Vue.component('child-component')
  export default {}
</script>


<template functional>
  <div>
    <child-component/>
  </div>
</template>