如何从子组件的操作中强制重新加载父组件答案

【问题标题】：How can I force reload the parent component from action of child component如何从子组件的操作中强制重新加载父组件
【发布时间】：2020-09-10 06:23:57
【问题描述】：

请检查我提供的链接，我想通过 API 将项目添加到表格时刷新表格，并在删除项目时刷新表格。

将数据添加到表格中的按钮在子元素中，但显示数据的表格在父组件中，所以我不确定如何单击子元素中的按钮来强制父元素重新加载/刷新

【问题讨论】：

【解决方案1】：

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

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

this.$emit('weAreSure')

并且在父组件html中：

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

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

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

【讨论】：

【解决方案2】：

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

Vue 最显着的特点之一是不显眼的反应系统。模型只是普通的 JavaScript 对象。当您修改它们时，视图会更新。它使状态管理变得简单直观，但了解其工作原理以避免一些常见问题也很重要。

例如，如果您希望在删除趋势时更新表格，则应从模型中删除趋势，您当前只是发送 api 请求。

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

【讨论】：

所以这个方法删除了（toptrackTrends）中已经存在的元素。当我添加新项目时怎么样？因为 (toptrackTrends) 获得新项目的唯一方法是再次调用 API 对吗？
使用您当前的设置，您可以执行@dreijntjens 建议之类的操作并订阅<HelloWorld msg="Hello Vue in CodeSandbox!" @addTrend="toptrackTrends.push($event)" /> 之类的事件，然后在添加趋势this.$emit("addTrend", newtrend); 时发出该事件