javascript - single - ¿Es posible pasar un componente como accesorios y usarlo en un componente infantil en Vue?

vue sync

Question

En una aplicación Vue 2.0, digamos que tenemos los componentes A, B y C.

A declara, registra y usa B

¿Es posible pasar C de A a B?

Algo como esto:

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

Y usa C en B de alguna manera.

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

La motivación: quiero crear un componente genérico B que se usa en A pero que recibe de A su hijo C En realidad, A usará B varias veces para pasarle diferentes ''C''.

Si este enfoque no es correcto, ¿cuál es la forma correcta de hacerlo en Vue?

Respondiendo @Saurabh

En lugar de pasar como accesorios, probé la sugerencia dentro de 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: []
}
}

Básicamente estoy tratando de renderizar el Equipo, pero de una manera dinámica

Obtengo 3 errores en la consola y una página en blanco

[Vue warn]: Error al procesar el componente en /home/victor/projetos/tokaai/public/src/components/EquipmentFormItem.vue:

Unkeught TypeError: no se puede leer la propiedad ''nombre'' de indefinido

TypeError: no se puede leer la propiedad ''setAttribute'' de undefined

Aparentemente estoy haciendo algo mal

Answer 1

Puedes usar un atributo especial para hacer este tipo de cosas. El ejemplo del componente dinámico y su uso se puede encontrar aquí .

Puede usar el mismo punto de montaje y cambiar dinámicamente entre múltiples componentes usando el elemento reservado y enlazar dinámicamente a su atributo is:

Su código se verá como sigue:

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

Answer 2

Resumiendo:

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