如何从 child 组件的操作中强制重新加载 parent 组件

How can I force reload the parent component from action of child component

请检查我提供的link,我想在通过API添加项目到table时刷新table,并刷新table 删除项目时。

向table添加数据的按钮在child元素中,但是显示数据的table在parent组件中,所以我不确定我如何单击 child 中的按钮将 parent 强制为 reload/refresh

https://codesandbox.io/s/pensive-monad-lf402?file=/src/components/HelloWorld.vue(要添加项目,必须先勾选我的UI中的单选按钮)

您不需要强制重新加载 table,Vue 是反应式的,这意味着当您更新模型时,视图会自动更新。

One of Vue’s most distinct features is the unobtrusive reactivity system. Models are just plain JavaScript objects. When you modify them, the view updates. It makes state management simple and intuitive, but it’s also important to understand how it works to avoid some common gotchas.

Reactivity in Depth

例如,如果您希望 table 在删除趋势时更新,您应该从模型中删除趋势,您目前只是发送一个 api 请求。

您可以将 this.toptrackTrends = this.toptrackTrends.filter(x => x.ID !== deleteid); 放在 DeleteTrend 方法的底部,这将过滤掉 ID 为 deleteid 的任何趋势。

您可以使用 $emit 向您的父元素发送通知。

所以当确认后你可以发送 $emit

this.$emit('weAreSure')

而在父组件中html:

<HelloWorld msg="Hello Vue in CodeSandbox!" @weAreSure="handleweAreSure"/>

而 handleweAreSure 只是一个 vue 方法,您可以在其中重新加载数据, 或者您可以向该方法添加一些参数。

https://codesandbox.io/s/ecstatic-beaver-bgm1b

有关发射的更多信息https://vuejs.org/v2/guide/components-custom-events.html#Event-Names

如果你必须在你的应用程序中使用大量的 $emits 或许值得看看 vuex (https://vuex.vuejs.org/guide/)。