Est-il possible de passer un composant comme accessoire et de l'utiliser dans un composant enfant dans Vue?

Question

Dans une Vue 2.0 app, disons que nous avons des composants A, B et C.

Un déclare, enregistre et utilise B

Est-il possible de passer à C de A à B?

Quelque chose comme ceci:

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

Et l'utilisation de C en B, en quelque sorte.

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

La motivation: je veux créer un composant générique B qui est utilisé dans A mais reçoit de l' A de son enfant C. En fait A utilisera B plusieurs fois en passant différents " C " pour elle.

Si cette approche n'est pas correcte, ce qui est la façon correcte de le faire en Vue?

Répondre À @Saurabh

Au lieu de passer comme des accessoires, j'ai essayé la suggestion à l'intérieur 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: []
 }
}

Fondamentalement, je suis en train de rendre l'Équipement, mais d'une manière dynamique

Je reçois 3 erreurs dans la console et une page vierge

[Vue avertir]: Erreur lors du rendu de la composante à /home/victor/projetos/tokaai/public/src/composants/EquipmentFormItem.vue:

Uncaught TypeError: Cannot read property 'nom' undefined

TypeError: Cannot read property 'setAttribute' undefined

Apparemment, je suis en train de faire quelque chose de mal

Answer 1

Résumant:

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

Answer 2

Vous pouvez utiliser l'attribut spécial, is pour faire ce genre de chose. Exemple de composant dynamique et son utilisation peuvent être trouvés ici.

Vous pouvez utiliser le même point de montage et dynamique de basculer entre plusieurs composants à l'aide de la réserve de l'élément et de se lier de façon dynamique à son attribut est:

Votre code ressembler à ce qui suit:

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