从父 Vue 更新子组件中的 prop 值答案

【问题标题】：Updating prop value in child component from parent Vue从父 Vue 更新子组件中的 prop 值
【发布时间】：2019-10-01 11:21:22
【问题描述】：

所以，我想在父组件更新值时更新子组件中的道具。但我这样做有点不同，因为我遇到了一个问题，即子道具没有得到更新。

meet.vue

<template>
...
<div>{{ meet.name }} </div>
...
</template>
...
props: ["meet"]

time.vue

<template>
...
<meet :meet="showMeet(e.id)" /> // id is coming because meet is in a v-for
</template>
...
props: ['events'],
...
methods: {
   showMeet(id) {
      this.events.forEach(e => { if(e.id === id) return e})
   }
}

activity.vue

<template>
...
<time :events='events' ref="time" />
...
</template>
...
methods: {
   sendEvents(event) {
      // some manipulation to event
      this.$refs.time.showMeet(event.id)
   }
}

正如您在上面的组件中看到的那样，我正在处理 activity.vue 中的一些数据（事件）并调用子组件中的showMeet()。我想从 activity.vue 中更新 meet.vue 中的值。

我认为这会起作用，但事实并非如此。我觉得它是因为 time.vue 中的 prop "meet" 在调用它时从函数中获取了它的值。但在其他情况下（父级 activity.vue 调用它），道具“meet”不会返回任何值。因此 meet.vue 中的 prop 没有更新。

知道如何更新孩子吗？我不确定这是不是正确的方法，但如果有人有更好的方法，请告诉我。谢谢！

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

来自 vue.js 文档https://vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow

所有的 props 在子属性和父属性之间形成一个单向向下的绑定：当父属性更新时，它会向下流向子属性，但不是相反。

如果你想更新道具，你应该更新父母数据。例如，您可以使用$emit('input', value)，如下所示
https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components

【讨论】：