Wie aktualisierten Werte von Eltern-Komponente zu Kind-Komponente in Vue JS senden?

Question

Ich übergebe eine Variable von Eltern-Komponente zu Kind-Komponente durch Requisiten. Aber mit etwas Operation wird der Wert dieser Variable geändert, d. H. Beim Klicken auf eine Schaltfläche in der übergeordneten Komponente, aber ich wusste nicht, wie ich diesen aktualisierten Wert an child übergeben soll. Angenommen, der Wert einer Variablen ist zunächst falsch, und in der übergeordneten Komponente befindet sich die Schaltfläche Bearbeiten. Ich ändere den Wert dieser Variablen beim Klicken auf die Schaltfläche Bearbeiten und möchte den aktualisierten Wert von der übergeordneten zur untergeordneten Komponente übergeben.

Answer 1

Sie können eine (Requisite) Variable mit dem vue watch ansehen.

zum Beispiel:

<script> 
export default { 
    props: ['chatrooms', 'newmessage'], 
    watch : { 
    newmessage : function (value) {...} 
    }, 
    created() { 
    ... 
    } 
} 
</script> 

Ich hoffe, dass dies Ihr Problem lösen wird. :)

Answer 2

können Sie verwenden Dynamic Props.

Diese Daten dynamisch aus dem übergeordneten Prozesses Komponente zu übergeben wird, wie Sie wollen.

Answer 3

Der Wert Ihrer Eigenschaft sollte dynamisch aktualisiert werden, wenn Requisiten zwischen übergeordneten und untergeordneten Komponenten verwendet werden. Basierend auf Ihrem Beispiel und dem Ausgangszustand der Eigenschaft, der falsch ist, ist es möglich, dass der Wert nicht ordnungsgemäß an die untergeordnete Komponente übergeben wurde. Bitte bestätigen Sie, dass Ihre Syntax korrekt ist. Sie können here als Referenz überprüfen.

Wenn Sie jedoch eine Reihe von Aktionen ausführen möchten, wenn sich der Wert der Eigenschaft ändert, können Sie eine watcher verwenden.

EDIT:

Hier ist ein Beispiel unter Verwendung von beide Requisiten und Beobachter:

HTML

<div id="app"> 
    <child-component :title="name"></child-component> 
</div> 

JavaScript

Vue.component('child-component', { 
    props: ['title'], 
    watch: { 
    // This would be called anytime the value of title changes 
    title(newValue, oldValue) { 
     // you can do anything here with the new value or old/previous value 
    } 
    } 
}); 

var app = new Vue({ 
    el: '#app', 
    data: { 
    name: 'Bob' 
    }, 
    created() { 
    // changing the value after a period of time would propagate to the child 
    setTimeout(() => { this.name = 'John' }, 2000); 
    }, 
    watch: { 
    // You can also set up a watcher for name here if you like 
    name() { ... } 
    } 
});