如何在 Vue JS 中将更新的值从父组件发送到子组件？

Question

我通过道具将变量从父组件传递到子组件。但是通过一些操作，该变量的值正在改变，即单击父组件中的某个按钮，但我不知道如何将更新后的值传递给子组件？假设一个变量的值最初是 false 并且父组件中有 Edit 按钮。我在单击编辑按钮时更改此变量的值，并希望将更新后的值从父组件传递给子组件。

原文由 Ravi Garg 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在父组件和子组件之间使用道具时，您的属性值应该动态更新。根据您的示例和属性的初始状态为 false，该值可能未正确传递到子组件中。请确认您的语法正确。您可以 在这里查看 以供参考。

但是，如果您想在属性值更改时执行一组操作，则可以使用 watcher 。

编辑：

下面是一个 同时 使用 props 和 watchers 的例子：

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

原文由 Olajide Oye 发布，翻译遵循 CC BY-SA 4.0 许可协议