在 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
我没有作为 props 传递,而是尝试了 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 渲染组件时出错:
未捕获的类型错误:无法读取未定义的属性“名称”
类型错误:无法读取未定义的属性“setAttribute”
显然我做错了什么
加起来:
<!-- 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)