Question

我通过props将一个变量从父组件传递给子组件。但是通过一些操作，该变量的值会发生变化，即点击父组件中的某个按钮，但我不知道如何将更新后的值传递给child？假设一个变量的值最初为false，并且父组件中有“编辑”按钮。我在点击“编辑”按钮时更改了此变量的值，并希望将更新后的值从父组件传递给子组件。

Answer 1

在父组件和子组件之间使用道具时，应动态更新属性的值。根据您的示例并且属性的初始状态为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() { ... } } });

Answer 2

您可以使用vue watch观看（道具）变量。

例如：

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

我希望这能解决你的问题。：）

Answer 3

您可以使用Dynamic Props.

这会根据需要动态地将数据从父组件传递到子组件。

Answer 4

其中值是对象的属性尤其棘手。如果更改该对象中的属性，则状态不会更改。因此，子组件不会更新。

检查此示例：

// ParentComponent.vue

<template>
    <div>
        <child-component :some-prop="anObject" />
        <button type="button" @click="setObjectAttribute">Click me</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                anObject: {},
            };
        },
        methods: {
            setObjectAttribute() {
                this.anObject.attribute = 'someValue';
            },
        },
    };
</script>

// ChildComponent.vue

<template>
    <div>
        <strong>Attribute value is:</strong>
        {{ someProp.attribute ? someProp.attribute : '(empty)' }}
    </div>
</template>

<script>
    export default {
        props: [
            'someProp',
        ],
    };
</script>

当用户单击“单击我”按钮时，将更新本地对象。但是，由于对象本身相同-仅更改了其属性-不会调度状态更改。

要解决此问题，可以通过以下方式更改setObjectAttribute：

setObjectAttribute() {

    // using ES6's spread operator
    this.anObject = { ...this.anObject, attribute: 'someValue' };

    // -- OR --

    // using Object.assign
    this.anObject = Object.assign({}, this.anObject, { attribute: 'someValue' });

}

这样做，anObject数据属性正在接收新的对象引用。然后，更改状态，子组件将接收该事件。

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

4 个答案: