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

Posted 2023-02-22

【中文标题】从父 Vue 更新子组件中的 prop 值

【英文标题】：Updating prop value in child component from parent Vue

【发布时间】：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 没有更新。

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

【参考方案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