遇到问题的场景:

数据发生了变化,组件并没有响应到

问题所在

需要把当前组件完全还原成初始化状态,不要页面全部刷新

4种解决方法:

  1. 重新加载整个页面(不推荐)
  2. v-if可以实现 true (加载)和false(卸载) (不推荐)
  3. 使用 $forceUpdate() (可以使用)
  4. 使用组件中的 :key (推荐)

这里只介绍第4种

这个最简单实用,如果需要每次在当前父页面更新时重载某个组件就可以用这个方法,每次组件更新 :key 都会重新取值,而时间戳每次都是不同的,组件发现 :key发生变化就会重新渲染

<zujian ref="zujian" :key="new Date().getTime()"></zujian>

直接把new Date().getTime() 放到组件中,每次得到的时间都不一样,变相的达到了组件重新加载的效果,但是这样做也有弊端,最好是找一个每次都会变化的变量,放到key里面

弊端: 如果当前组件同级有input输入框就尴尬了,每次输入都会重载这个CompTable组件,如果页面有表单就只能用v-if或其他的形式了

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐