国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Nutzen Sie VueJS-Komponenten in PHP
P粉611456309
P粉611456309 2023-11-11 00:01:44
0
2
1047

Ich m?chte grundlegendes HTML, das von PHP- und VueJS-Komponenten generiert wurde, mischen, ohne VueJS bis zum untersten Dom-Blatt verwenden zu müssen.

Auf das übergeordnete Layout ist eine Vue-Anwendung angewendet, alle Kopfzeilen, Navigation, Seitenleisten usw. sind Vue-Komponenten und der Hauptinhalt auf den meisten Seiten ist immer noch reines, von PHP generiertes HTML.

Ich m?chte einen kleinen Teil des Hauptinhalts mit Vue-Komponenten aktualisieren, kann sie aber nicht verwenden, sobald ich HTML verwende: 

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.

Funktioniert im oberen DOM einwandfrei, aber nach dem Rendern einiger grundlegender HTML-Elemente füllt die App die Komponenten unten nicht mehr aus.

Php kann JS in Skript-Tags rendern, aber keine Importe verwenden.

Gibt es eine M?glichkeit, eine Vue-Instanz dazu zu bringen, alle 標(biāo)簽視為 Cats Tags als Cats-Komponenten zu behandeln, unabh?ngig davon, wo auf der Seite sie geschrieben sind?

Was ich bisher versucht habe:

  • Asynchrone Komponenten.
  • Verwenden Sie das Portal, das das Portal installiert.
  • Erstellen Sie eine weitere Vue-Instanz und mounten Sie sie auf einer anderen ID.

Irgendwelche Ideen?

EDIT: Ich habe bereits Dinge ausprobiert, die m?glicherweise durch das Durcheinander mehrerer Versuche zur Modernisierung der Benutzeroberfl?che in diesem Giganten, den ich geerbt habe, zunichte gemacht wurden. Daher würde ich diese M?glichkeiten für andere, die sich in dieser Situation befinden, nicht ausschlie?en.

P粉611456309
P粉611456309

Antworte allen(2)
P粉883973481

如果您將來(lái)自 API 或任何其他來(lái)源的模板動(dòng)態(tài)傳遞到您的 Vue 實(shí)例中。有一種方法可以通過(guò) v-html 屬性訪問(wèn)該屬性，但在使用之前請(qǐng)查看下面的注釋。

請(qǐng)注意，內(nèi)容以純 HTML 形式插入 - 它們不會(huì)被編譯為 Vue 模板。

因此，當(dāng)您嘗試綁定/渲染組件本身時(shí)，它不是純 HTML。所以它不會(huì)被Vue的模板編譯器處理。

可能的解決方案是您可以從 PHP API 獲取組件名稱(chēng)和屬性，而不是整個(gè) HTML 模板。

您也可以通過(guò)使用 Vue 編譯選項(xiàng)來(lái)實(shí)現(xiàn)相同的目的。這是演示：

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);
    })
  }
});
P粉494151941

最后，我必須手動(dòng)將 JS 文件添加到包含全局 window.ExtraVue 的構(gòu)建配置中，其設(shè)置函數(shù)如下所示：

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

};

然后在 PHP 腳本的最后調(diào)用設(shè)置函數(shù)。



setup 函數(shù)現(xiàn)在可以為每個(gè)需要獨(dú)立的組件創(chuàng)建一個(gè)新的 Vue 實(shí)例。


理想情況下，如果 VueJS 能夠用組件替換匹配的標(biāo)簽，那就太好了。

                            
                                                            
                            
                            

                                
    
                                    
                                


                            



                        

                    


                

                

                



                

            

        


        
        

            
            
            
            
            

                

                    
Neueste Downloads

                    Mehr>
                    
                


                                

                

                    

                        
Web-Effekte 

                        
Quellcode der Website

                        
Website-Materialien

                        
Frontend-Vorlage