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

Posted 2023-02-22

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

【英文标题】：How to send updated values from Parent component to child component in Vue JS?

【发布时间】：2018-03-07 15:05:36

【问题描述】：

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

【问题讨论】：

你能分享一下代码的小片段吗

【参考方案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()  ... 
  
);

【参考方案2】：

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

例如：

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

</script>

我希望这能解决您的问题。 :)

【参考方案3】：

您可以使用Dynamic Props.

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

【参考方案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 数据属性正在接收一个新的对象引用。然后，状态发生变化，子组件将收到该事件。