Manfaatkan komponen VueJS dalam PHP

Question

Saya ingin mencampurkan HTML asas yang dijana oleh komponen Php dan VueJS tanpa perlu menggunakan VueJS sehingga ke daun dom terendah.

Reka letak induk mempunyai aplikasi Vue yang digunakan, semua pengepala, navigasi, bar sisi, dll. ialah komponen Vue, dan kandungan utama pada kebanyakan halaman masih HTML tulen yang dijana oleh PHP.

Saya ingin menaik taraf sebahagian kecil kandungan utama dengan komponen Vue, tetapi saya tidak boleh menggunakannya sebaik sahaja saya menggunakan 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.

Berfungsi dengan baik di DOM atas, tetapi selepas memaparkan beberapa HTML asas, apl tidak akan mengisi komponen di bawah lagi.

Php boleh menjadikan JS dalam teg skrip, tetapi tidak boleh menggunakan sebarang import.

Adakah terdapat cara untuk menjadikan contoh Vue merawat semua 标签视为 Cats ​​teg sebagai komponen Kucing, tidak kira di mana pada halaman ia ditulis?

Apa yang saya telah cuba setakat ini:

• Komponen tak segerak.
• Gunakan portal yang memasang portal.
• Buat contoh Vue lain dan lekapkannya pada ID lain.

Ada idea?

EDIT: Saya pernah mencuba perkara sebelum ini yang mungkin terhalang oleh pelbagai percubaan pemodenan UI dalam raksasa yang saya warisi ini. Jadi saya tidak akan menolak kemungkinan ini untuk orang lain yang menghadapi situasi ini.

Answer 1

Jika anda menghantar templat daripada API atau mana-mana sumber lain secara dinamik ke dalam contoh Vue anda. Terdapat cara untuk mengakses harta ini melalui atribut v-html, tetapi sila semak ulasan di bawah sebelum menggunakannya.

Sila ambil perhatian bahawa kandungan dimasukkan sebagai HTML tulen - ia tidak disusun ke dalam templat Vue.

Jadi apabila anda cuba untuk mengikat/membuat komponen itu sendiri, ia bukan HTML tulen. Jadi ia tidak akan diproses oleh pengkompil templat Vue.

Penyelesaian yang mungkin ialah anda boleh mendapatkan nama komponen dan sifat daripada API PHP dan bukannya keseluruhan templat HTML.

Anda juga boleh mencapai perkara yang sama dengan menggunakan pilihan kompilasi Vue. Berikut ialah demo :

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

Akhirnya, saya terpaksa menambah fail JS secara manual pada konfigurasi binaan yang mengandungi global window.ExtraVue dengan fungsi tetapan seperti ini:

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

};

Kemudian panggil fungsi persediaan di penghujung skrip PHP.

sssccc

Fungsi persediaan kini boleh mencipta contoh Vue baharu untuk setiap komponen yang perlu bebas.

Sebaik-baiknya, adalah bagus jika VueJS boleh menggantikan tag yang sepadan dengan komponen.