Est-il possible de passer un composant que les accessoires et les utiliser dans un Composant enfant en Vue?

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

A 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 A 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éponse @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

Êtes-vous sûr que ces erreurs proviennent de ces code seulement, où en êtes-vous à l'aide de setAttribute ou name attribut?
doit être un processus interne. Je ne suis pas le faire dans cette application

InformationsquelleAutor Victor Ferreira | 2017-03-24

16

Vous pouvez utiliser l'attribut spécial is pour faire ce genre de chose. Exemple de composant dynamique et son utilisation peut être trouvé 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>
```
- pas de travail ici, mais je ne sais pas exactement ce qui se passe. Je Vais mettre à jour ma question avec plus d'informations
InformationsquelleAutor Saurabh
15

En résumé:
```

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


<template>
  <div class="B">
    <h1>Some content</h1>
    <slot></slot> 
  </div>
</template>
```
- cela a fonctionné parfaitement, merci. J'ai eu un suivi sur ce point. Maintenant, imaginez que le Composant C émet un événement, et je veux agir sur la Composante B. j'ai essayé de les écouter à l'aide de v sur les <slot> mais cela ne fonctionne pas. Quelles sont mes options?
- J'ai la réponse! Je voudrais simplement écouter l'événement dans le grand-parent, c'est à dire <composante :y="child_component" @quelques-event="handleIt"> au lieu de l'écoute sur la fente où il est injecté.
- nous devons avoir pour importer tous les composants enfants où nous avons ` <composante :y="child_component"></component>` étiquette. ne serait-il pas plus si nous avons besoin uniquement de l'enfance des composants du parent seul. est-il une solution où l'on peut importer les éléments dans le parent et le transmettre à l'enfant?
InformationsquelleAutor Jonatas Walker
0

Voici la solution pour transférer composant personnalisé grâce à des accessoires d'un autre composant

:is est attribut spécial, et il sera utilisé pour remplacer votre composant et il sera ignoré si vous essayez de l'utiliser comme un accessoire dans votre composant. Heureusement, vous pouvez utiliser autre chose comme el et puis la transmettre à component comme suit:
```
<template>
  <div>
    <component :is="el">
      <slot />
    </component>
  </div>
</template>
<script>
  export default {
    name: 'RenderDynamicChild',
    props: {
        el: {
            type: [String, Object],
            default: 'div',
        },
    },
  }
</script>
```
Aucun élément que vous utilisez dans el attribut sera utilisé comme un composant enfant. Il peut être html ou la référence de votre composant personnalisé ou div par défaut comme indiqué dans la déclaration des constituants.

Passant composant personnalisé à prop est un peu délicat. On pourrait supposer que vous déclarez dans une components propriété du composant parent et l'utiliser ensuite pour el attribut mais cela ne fonctionne pas. Au lieu de cela, vous devez avoir votre composant dynamique dans data ou computed de la propriété de sorte que vous pouvez l'utiliser dans un modèle comme un accessoire. Notez également AnotherComponent n'a pas besoin d'être déclarés dans components de la propriété.
```
<template>
  <RenderDynamicChild :el="DynamicComponent">
    Hello Vue!
  </RenderDynamicChild>
</template>

<script>
import RenderDynamicChild from './DynamicChild';
import AnotherComponent from './AnotherComponent';

export default {
  name: "ParentComponent",
  components: { DynamicChild },
  data() {
    return {
      DynamicComponent: AnotherComponent,
    };
  },
};
</script>
```
Calculée à l'aide de la propriété pour votre composant dynamique permet de basculer entre les composants facilement:
```
<script>
import DynamicChild from './DynamicChild';
import AnotherComponent from './AnotherComponent';

export default {
  name: "ParentComponent",
  components: { DynamicChild },
  data() { return { count: 0 } },
  computed: {
    DynamicComponent() {
      return this.count % 2 > 1 ? AnotherComponent : 'article';
    },
  },
};
</script>
```
Augmentation this.count d'alterner entre AnotherComponent et simple article élément html.

InformationsquelleAutor NiBi

Vous devez vous connecter pour publier un commentaire.