Vue中不刷新页面,只刷新局部组件的方法

第一步:组件后面加上v-if方法

<div id="app" ref="app">
  <router-view v-if="is_show"/>
</div>

第二步:data定义一个变量控制v-if

data() {
  return {
    is_show: true //定义一个变量控制v-if
  }

第三步:自定义刷新局部组件方法

reflash: async function () {
    this.is_show = false
    await this.$nextTick
    this.is_show = true
  }

this.$nextTick原理——确保 DOM 已经被更新


第四步:需要刷新时调用即可

//刷新组件
this.reflash();
posted @ 2024-02-07 23:30  wellplayed  阅读(464)  评论(0编辑  收藏  举报