如何將更新的值從父組件發送到Vue JS中的子組件？

Question

我通過道具從父組件傳遞一個變量給子組件。但通過一些操作，該變量的值發生了變化，即點擊了父組件中的某個按鈕，但我不知道如何將更新後的值傳遞給子組件？假設一個變量的值最初爲false，並且父組件中有Edit按鈕。我正在更改此變量的值，單擊「編輯」按鈕，並且想要將更新的值從父項傳遞給子組件。

Answer 1

您可以使用vue watch觀看（道具）變量。

例如：

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

我希望這將解決您的問題。 :)

Answer 2

您可以使用Dynamic Props.

只要你想這將動態地從父數據傳遞到子組件。

Answer 3

在父組件和子組件之間使用道具時，應該動態更新您的屬性值。根據您的示例以及該屬性的初始狀態爲false，可能該值未正確傳遞到子組件中。請確認您的語法是正確的。您可以查詢here以供參考。

但是，如果您想在屬性值發生更改時執行一組操作，則可以使用watcher。

編輯：

下面是使用都道具和觀察家的例子：

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() { ... } 
    } 
});