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

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

向表中添加数据的按钮位于子元素中,但显示数据的表位于父组件中,因此我不确定如何单击子元素中的按钮以强制父项重新加载/刷新

https://codesandbox.io/s/pensive-monad-lf402?file=/src/components/HelloWorld.vue (to add an item, must tick the radio button in my UI first)

评论
疯癫范er
疯癫范er

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

Vue最独特的功能之一是不引人注目的反应系统。模型只是普通的JavaScript对象。修改它们时,视图将更新。它使状态管理变得简单而直观,但是了解其如何避免某些常见陷阱也很重要。

Reactivity in Depth

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

You can put this.toptrackTrends = this.toptrackTrends.filter(x => x.ID !== deleteid); at the bottom of your DeleteTrend method, this will filter out any trends that have an ID of deleteid.

点赞
评论
nsit
nsit

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

因此,确认后您可以发送$ emit

this.$emit('weAreSure')

并在父组件html中:

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

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

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

For more information about emit https://vuejs.org/v2/guide/components-custom-events.html#Event-Names

If you have to use a lot of $emits within you application maybe it is worth to look at vuex (https://vuex.vuejs.org/guide/).

点赞
评论