当孙文件发送成功的 PUT 请求时如何更新 vue 中的道具答案

【问题标题】：how to update the props in vue when the grandchild file has send the succeed PUT request当孙文件发送成功的 PUT 请求时如何更新 vue 中的道具
【发布时间】：2020-04-02 04:15:08
【问题描述】：

我有三个 vue.js 文件。其中父文件（parent.vue）包含profile:[]的数据

使用props方法将配置文件的数据发送到子文件（child.vue）。

child.vue 也有它自己的子文件 (grandchild.vue)，它通过使用 props 与 profile 数据一起传递。

孙子将向 API 发送 put 请求以更改配置文件中的某些数据。

我的问题是。我如何确保道具会在配置文件数据中所做的每一次更改时更新。

信息：（parent.vue = 主文件，child.vue = 抽屉（来自 ant design），grandchild = 弹出框）

在孙子成功向 API 发送 put 请求后，我需要 child.vue 更新配置文件数据。

有什么方法或参考链接，所以我可以在来自grandchild.vue 的 put 请求后更新道具我尝试了 watch 方法，但问题是用户需要先关闭抽屉（child.vue）然后重新打开抽屉来更新道具。有什么方法可以在不关闭抽屉的情况下更新道具？

代码示例：

父.vue：

// structure
<child.vue
  :profile="profile"
/>

child.vue 和 grandchild.vue ：

//script
props : [profile],

profile 可以用作 html 中的 {{profile.subsdata}} 或 this.profile.subsdata javascript

【问题讨论】：

适当使用:key 绑定可能会有所帮助，但如果您没有显示任何代码，则很难提供建议

标签： vue.js

【解决方案1】：

使用发射。告诉父组件通过另一个 GET 请求进行更新，或者直接将数据传回。

子方法：

notifyParent () {
     this.$emit('updateProfile')
}

父模板：

<ChildComponent v-on:updateProfile="someMethod"/>

父方法：

someMethod () {
     //GET request or whatever
}

【讨论】：

这本来是一个很好的问题，但是您忘记了 DOM 模板中的 v-on 事件侦听器将自动转换为小写（由于 HTML 不区分大小写），因此 v-on:myEvent 将变为v-on:myevent – 使 myEvent 无法收听。所以大写字母是错误的
@FrancoMaldonado 仅当您不使用 SFC 时才会出现这种情况。他们在幕后使用 kebab-case，但您绝对可以在模板中使用 camelCase。在这种情况下，它甚至不是反模式，只是口味问题。如果全局生成组件，则必须使用 kebab-case。

【解决方案2】：

这里的关键字是eventBus，你需要一个eventBus来$emit一个事件，从grandchild组件改变parent组件中的数据。如果在这种情况下只需要更改数据 1 层而不是 2 层，则只需要自定义事件 + $emit，无需 eventBus。但是由于它大于2层，你需要eventBus，甚至more relegent ways来做状态管理。

【讨论】：

我建议如果 $emit 是常用的或者有任何 prop-drilling 的情况，你最好实现 Vuex 进行状态管理。如果它是一个非常小的应用程序，使用 eventBus 可能还不错，但它会更符合使用商店的最佳实践。