父组件数据更新之后,子组件重新进行渲染并且更新页面。

  • Post author:
  • Post category:其他


问题描述:


子组件在created


或者


mounted


函数中向后台申请表格数据进行渲染。




父组件添加一个数据后,子组件需要再一次向后台申请表格数据,重新渲染页面并更新数据,也就是子组件得



重新跑一遍生命周期的进程。如下图所示。





遇到的问题:子组件中的



created


或者


mounted


函数只会执行一次,在父组件添加数据成功之后,没有进行组件的切换,因此子组件不会重新渲染并且更新数据。



解决办法:



①:强制刷新页面,让父子组件均重新渲染,但是这种方法很粗暴,与父组件关联的一些组件数据也丢失了。



②:采用v-if



v-if





v-show


的区别是:




v-if




是动态地向




DOM




树中添加或删除




DOM元素节点;



如果在初始渲染时条件为假,v-if什么也不做


条件为


true


的时候,


v-if


控制的那个



DOM




元素



会重新渲染。所以如果对子组件设置v-if,



它会重新跑一遍子组件的生命周期进程。





v-show




是通过向




DOM




元素设置样式




display




属性值控制显示隐藏。





但是v-if只能是true或者false的控制。





③:采用key


 <BlockLists ref="blockList" :key="Num"></BlockLists>

key的value值可以是数值或者字符串,当key的value值发生变化时,子组件BlockLists会重新渲染。使子组件完整地触发生命周期钩子



。完成页面的数据更新。




版权声明:本文为qq_47530527原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。