如何将更新的值从父组件发送到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() { ... } 
    } 
});