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

JavaScript

逆天十三

2020-03-11

假设在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警告]:在/home/victor/projetos/tokaai/public/src/components/EquipmentFormItem.vue处渲染组件时出错:

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

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

显然我做错了

第799篇《是否可以将组件作为道具传递并在Vue的子组件中使用它?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
理查德Itachi 2020.03.11

您可以使用特殊属性is来执行此类操作。可在此处找到动态组件及其用法的示例

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

您的代码将如下所示:

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android