1
votes

Le composant fonctionnel Vue jette _c n'est pas une erreur définie

J'ai créé le composant fonctionnel suivant en utilisant la méthode de rendu:

<template>
    <div id="app">
        <HelloWorld />
    </div>
</template>

<script>
export default {
    data() {
        return {
            compiled: false
        }
    }
}
</script>

<style>
</style>

Et puis dans App.vue:

import Vue from "vue"

const { render, staticRenderFns } = Vue.compile(`<div>Hello World</div>`)

Vue.component("HelloWorld", {
    functional: true,
    render,
    staticRenderFns
})

Et j'obtiens l'erreur:

_c n'est pas défini .

Est-ce que je fais quelque chose de mal ici?

javascript vue.js vue-component vuejs2

4 commentaires

Voir ceci - stackoverflow.com/questions/44369839/... vous devez importer votre composant

Importer mon composant? Mais il est déjà déclaré en tant que composant global. Et aussi, ce problème concerne uniquement le composant fonctionnel. Le composant normal fonctionne bien, c'est-à-dire que si je supprime fonctionnel: true , cela fonctionne bien.

Que diriez-vous de: stackoverflow.com/questions/57901607/…

@webnoob Merde, c'est utile. Merci beaucoup. Bien que pas sûr du composant fonctionnel.

3 Réponses :

0
votes

Pour autant que je sache, les fonctions de rendu générées par Vue.compile ne peuvent pas être utilisées pour rendre un composant fonctionnel.

6 commentaires

Oh merde! C'est une déception. Existe-t-il un moyen de créer un composant fonctionnel en passant une chaîne de modèle?

Je ne pense pas. Le compilateur de modèles fourni avec Vue n'est pas capable de compiler des modèles fonctionnels. Je pense que seul le compilateur fourni avec vue-loader peut le faire au moment de la construction.

Puis-je vous demander pourquoi vous avez besoin d'utiliser Vue.compile ? Il existe peut-être une meilleure solution à votre problème.

En fait, je récupère le code HTML du serveur et le rend comme un composant Vue.

Est-ce que vous récupérez du HTML brut ou est-ce un modèle Vue? Si c'est du HTML purifié, vous pouvez simplement utiliser v-html pour le rendre.

Le HTML est nettoyé. L'utilisateur est autorisé à créer lui-même des composants dynamiques. Ils définissent id et html et je les utilise pour cuire un composant et donc l'utilisateur peut écrire par exemple pour rendre ce composant.

0
votes

Je pense que la chose la plus proche de la création d'un composant fonctionnel à partir d'une chaîne de modèle impliquerait d'analyser la chaîne pour obtenir le type d'élément et les attributs et le rendre comme:

Vue.component("hello-world", {
      functional: true,
      render: function(createElement, context) {
        return createElement(
          "div",
         'example text'         
        );
      }
});

0 commentaires

0
votes

Comme Decade Moon l'a déjà mentionné, les fonctions de rendu renvoyées par Vue.compile ne peuvent pas être utilisées comme fonction de rendu dans un composant fonctionnel . La raison pour cela devient claire lorsque vous inspectez la signature de la fonction retournée par Vue.compile :

// component.vue

<template functional>
  <div>Hello World</div>
</template>

<script>
export default {
  name: "hello"
};
</script>

Comme vous pouvez le voir, il manque un deuxième argument à la fonction, qui est requis pour les fonctions de rendu des composants fonctionnels:

render: (createElement: CreateElement, context: RenderContext<Record<never, any>>) => VNode

Les composants fonctionnels sont sans instance. Cela signifie qu'il n'y a pas de ce contexte - c'est pourquoi un paramètre context supplémentaire est nécessaire pour transporter des accessoires \ des écouteurs, etc.

Aussi si vous regardez ce message sur le forum Vue : p >

La fonction de rendu créée par compile () repose sur les propriétés privées du composant. Pour avoir accès à ces propriétés, la méthode doit être affectée à une propriété du composant (elle a donc accès à ces propriétés via this )

Cependant, cela ne signifie pas que vous ne pouvez pas créer de composant fonctionnel avec un modèle. Vous pouvez, vous n'êtes tout simplement pas en mesure d'utiliser Vue.compile pour passer le texte du modèle de manière dynamique. Si vous êtes d'accord avec le modèle statique, vous pouvez le faire comme ceci:

const render: (createElement: any) => VNode

... et utiliser le composant comme n'importe quel autre SFC (composant de fichier unique = fichier VUE)

Si vous avez besoin d'un modèle de texte dynamique, utilisez simplement un composant non fonctionnel à la place ...

0 commentaires