Tirer parti des composants VueJS en PHP

Question

Je souhaite mélanger le HTML de base généré par les composants Php et VueJS sans avoir à utiliser VueJS jusqu'à la feuille dom la plus basse. La mise en page parent a une application Vue appliquée, tous les en-têtes, la navigation, les barres latérales, etc. sont des composants Vue, et le contenu principal de la plupart des pages est toujours du pur HTML généré par PHP. Je souhaite mettre à niveau une petite partie de mon contenu principal avec des composants Vue, mais je ne peux pas les utiliser une fois que j'utilise HTML : Phpscriptgeneratestheentiredom

P粉883973481 · Answer

Si vous transmettez dynamiquement des modèles de l'API ou de toute autre source dans votre instance Vue. Il existe un moyen d'accéder à cette propriété via l'attribut v-html, mais veuillez vérifier les commentaires ci-dessous avant de l'utiliser.

Veuillez noter que le contenu est inséré au format HTML pur - il n'est pas compilé dans les modèles Vue.

Ainsi, lorsque vous essayez de lier/rendre le composant lui-même, ce n'est pas du HTML pur. Il ne sera donc pas traité par le compilateur de modèles de Vue.

Une solution possible est que vous puissiez obtenir le nom et les propriétés du composant à partir de l'API PHP au lieu du modèle HTML complet.

Vous pouvez également réaliser la même chose en utilisant les options de compilation de Vue. Voici la démo :

Vue.component('Cats', {
  props: ['msg'],
  template: '{{ msg }}'
});

// Template coming from PHP
const template = ``

var app = new Vue({
  el: '#app',
  data: {
    compiled: null
  },
  mounted() {
    setTimeout(() => {
        this.compiled = Vue.compile(template);
    })
  }
});

sssccc

P粉494151941 · Answer

Enfin, j'ai dû ajouter manuellement les fichiers JS à la configuration de build contenant le global window.ExtraVue avec la fonction de paramètres comme ceci :

import Cats from 'files/Cats.vue';
window.ExtraVue = {
    setup: function(data) {
        new Vue({
            el: '#extra-vue',
            data: data,
            components: {
                Cats
            },
            template: ''
        })
    }

};

Appelez ensuite la fonction setup à la fin du script PHP.

sssccc

La fonction de configuration peut désormais créer une nouvelle instance Vue pour chaque composant qui doit être indépendant.

Idéalement, ce serait formidable si VueJS pouvait remplacer les balises correspondantes par des composants.