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 à jour une petite partie du contenu principal avec les composants Vue, mais je ne peux pas les utiliser une fois que j'utilise HTML :

Php script generates the entire dom
<div id="app"> VueJS instance mounts here.
    <Cats>This component works perfectly here.
    <div id="main Content">More HTML content generated by PHP.
        <Cats> Cats does nothing here.

Fonctionne bien dans le DOM supérieur, mais après avoir rendu du HTML de base, l'application ne remplira plus les composants ci-dessous.

Php peut restituer JS dans des balises de script, mais ne peut utiliser aucune importation.

Existe-t-il un moyen de faire en sorte qu'une instance Vue traite toutes les balises 标签视为 Cats comme des composants Cats, peu importe où sur la page elles sont écrites ?

Ce que j'ai essayé jusqu'à présent :

• Composants asynchrones.
• Utilisez le portail qui installe le portail.
• Créez une autre instance Vue et montez-la sur un autre identifiant.

Des idées ?

EDIT : J'ai déjà essayé des choses qui ont peut-être été bloquées par le fouillis de multiples tentatives de modernisation de l'interface utilisateur dans ce monstre dont j'ai hérité. Je n'exclurais donc pas ces possibilités pour d'autres personnes confrontées à cette situation.

Answer 1

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

  
  
  

Answer 2

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.