更新组件内的 Vue Prop [重复]

Question

我有一个 Client 组件，其中包含一个 ClientInfo 和 ClientForm 组件。客户端在其数据中有一个client，并将其作为道具传递给表单和信息。在ClientForm 组件中，我有一个方法来处理后端。现在当我尝试这样做时：

axios.put(url, body).then(res => {
  this.client = res.data
})

我收到有关直接变异道具以及我不应该如何做的错误消息。现在我正在这样做：

axios.put(url, body).then(res => {
  Object.keys(res.data).forEach((i) => {
    if(this.client[i] != res.data[i]){
      this.client[i] = res.data[i]
    }
  })
})

这似乎……有点不理想。

有没有更好的方法来处理从ClientForm 更新client 对象以便ClientInfo 组件获取新信息？

Answer 1

您可以使用新数据发出自定义事件：

axios.put(url, body).then(res => {
  this.$emit('client', res.data)
})

...然后在您的 Client 父组件中对该事件做出反应以更新其状态：

<ClientForm @client='(data) => client = data' />

我希望这会有所帮助。