Vue-Komponente reagieren auf Änderungen in Vue Datenobjekt

Question

Ich habe einige rohe HTML auf der Serverseite generiert, und ich möchte, dass dies mit dem Vue-Framework reaktiv aktualisiert wird.

Zuerst dachte ich, dass v-html den Job erledigen würde, aber das funktioniert nicht, da v-html nicht auf Änderungen in den vue Datenwerten reagiert.

Scheinbar Komponenten sind eine Möglichkeit, dies zu erreichen, aber ich kann nicht ganz herausfinden, wie Sie den Inhalt einer Komponente mit den Daten des Vue-Objekts verknüpfen.

---

sagen, dass ich einen Vue Datenwert table_html, und dies war ein Tisch bereit gemacht werden in der Seite, wie würde ich eine Komponente, die reagieren auf Veränderungen in table_html genannt haben?

Hier ist etwas, das nicht funktioniert. (Es scheint, dass, wenn Selbst Aufruf = dies, selbst die vue-Komponente wird, wie Referenz ich seine Eltern? Dh das page Objekt?)

page = new Vue({ 

    components: { 
    'table-element': { 
     template: "<div>{{ table_html }}</div>", 
     data: function() { 
     self = this; // References the component, not the parent 

     return self.table_html // How to reference the Vue bound data? 

     } 
    } 
    }, 

    el: "#container", 

    data: { 
    table_html: "<table>...table contents </table> 
    } 

Answer 1

Sie können props verwenden, um Daten zu übergeben von parent an die child Komponente . Weitere Details finden Sie in der offiziellen Dokumentation. https://vuejs.org/v2/guide/components.html#Props

// Component declaration 
 
Vue.component('table-element', { 
 
    // declare the props 
 
    props: ['tableHtml'], 
 
    
 
    // just like data, the prop can be used inside templates 
 
    // and is also made available in the vm as this.message 
 
    template: '<div>{{ tableHtml }}</div>', 
 
    
 
    data: function() {  
 
     self = this; 
 
     return self.tableHtml; 
 
}); 
 

 

 
page = new Vue({ 
 

 
    el: "#container", 
 

 
    data: { 
 
    table_html: "<table>...table contents </table> 
 
    } 
 
    
 
    
 
})

<div id="container"> 
 
    <table-element v-bind:table-html = "table_html" ></table-element> 
 
</div>

Answer 2

1) props kann eine gute Lösung in Kommunikation seiner Eltern-Kind-Komponenten oder recorder -Direct Kind registriert. Denken Sie daran, dass props eine Variable Daten als Daten in einem Vue Instante ist.
2) Sie speichern Daten ein Objekt in Javascript im globalen Bereich in Ihrer externen js-Datei, wenn Sie es in der Weitergabe von Daten an Nachkommen Kind in der Architektur von HTML-Code verwenden - es ist keine elegante Lösung.
3) Sie können vuex verwenden, um die Kommunikation von Daten in der Architektur von Komponenten zu steuern.