Question

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

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 中 update meet.vue 中的值。

我认为这会起作用，但是不会。我之所以这样认为是因为 time.vue 中的道具“ meet”在调用函数时正在从函数中获取其价值。但是在其他情况下（父对象 activity.vue 称呼它），道具“ meet”不会返回任何值。因此， meet.vue 中的道具不会更新。

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

Answer 1

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

所有道具在子属性和父属性之间形成单向绑定：当父属性更新时，它将向下流到子属性，反之则不然。

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

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

1 个答案: