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>