vue项目-父页面数据变化使子页面更新的几种情况

当操作页面时候，特别是增删改操作之后，数据会有所改变，这个时候我们希望组件中的数据要和最新数据一致，就需要重新更新渲染。以下是针对几种不同情况下方式:

一.子页面调用接口后重新渲染

1.使用ref方式

父组件中用ref=“xxx” 来声明子组件，然后通过在父组件值改变的地方来调用子组件中的方法this.$refs.xxx.getData()来获取最新数据，完成重新渲染。

2.使用watch监听父传子数据

当父子传参使用props的方式，此时若父页面数据变化，更改传递给子组件的参数。

在子页面进行watch监听父页面传过来的值。getData查询最新数据完成更新。

注意:以上两种方式是通过getData查询结果后通过v-model双向绑定数据进行更新渲染页面。

二.需要子页面重新渲染才更新数据

这种情况一般出现:在子组件中的created或者mounted函数只会执行一次，在父组件添加数据成功之后，没有进行组件的切换，因此子组件不会重新渲染并且更新数据。

1.强制刷新页面(不推荐)

(1)原地刷新页面

this.$router.go(0) //根据路由重新定向到当前页

或者

location.reload() //重新加载当前页

(2)空白页面

先跳转到空白页马上再回到原页面

2.使用v-if方式

v-if＝“status”

v-if是动态地向DOM树中添加或删除DOM元素节点；对子组件设置v-if，它会重新跑一遍子组件的生命周期进程。

3.采用key的方式

:key＝“number”

当key的value值发生变化时，子组件会重新渲染。使子组件完整地触发生命周期钩子。完成页面的数据更新。