Comment appliquer des classes au composant fonctionnel Vue.js à partir du composant parent ?

Question

Supposons que j'ai un composant fonctionnel :

<template functional>
    <div>Some functional component</div>
</template>

Maintenant, je rends ce composant dans un parent avec des classes :

<parent>
    <some-child class="new-class"></some-child>
</parent>

Résultat : DOM n'a pas new-class appliquée au composant enfant fonctionnel. Maintenant, si je comprends bien, Vue-loader compile Fonctionnel contre render función context como expliqué ici . Cela signifie que les cours ne seront pas directement appliqués et fusionnés intelligemment.

La question est - comment puis-je faire en sorte que le composant fonctionnel joue bien avec la classe appliquée en externe lorsque j'utilise un modèle ?

Remarque : je sais qu'il est facilement possible de le faire via la fonction de rendu :

Vue.component("functional-comp", {
    functional: true,
    render(h, context) {
        return h("div", context.data, "Some functional component");
    }
});

Answer 1

La façon dont vous pourriez le faire sans fonction de rendu est la suivante :

<template functional>
  <div class="my-class" :class="data.staticClass || ''" v-bind="data.attrs">
    //...
  </div>
</template>

v-bind lie toutes les autres choses, vous n'en aurez peut-être pas besoin, mais il liera des choses comme id . vous ne pouvez pas l'utiliser pour la classe cependant, parce que c'est un objet js réservé donc vue utilise staticClass de sorte que la liaison doit être effectuée manuellement à l'aide de l'option :class="data.staticClass" et dans la mesure où la classe peut ne pas être définie par le parent, vous devez utiliser :class="data.staticClass || ''"

Je ne peux pas montrer cela comme un violon, car seulement "Les composants fonctionnels définis en tant que composant à fichier unique dans un fichier *.vue reçoivent également une compilation correcte des modèles"

Mais j'ai une codesandbox qui fonctionne : https://codesandbox.io/s/z64lm33vol

Answer 2

Vous devez utiliser des props pour transmettre des attributs aux composants. https://vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props