Javascript

[Vue]组件强制刷新/重新渲染

本文主要是介绍[Vue]组件强制刷新/重新渲染,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

问题描述:

父组件(father)中,通过visible属性来控制子组件(son)的显示与隐藏,如下:

// 父组件father.vue
<template>
  <div class="wrap">
    <!-- 流程 -->
    <son @show="showPopup"></son>
    <!-- 弹出框 -->
    <div :visible="visible">
      <!-- 流程 -->
      <son :active.sync="active" @show="showTimeline"></son>
      <!-- 时间轴 -->
      <div>这是时间轴</div>
    </div>
  </div>
</template>
  • 代码解释:
    在父组件中,使用了两次子组件,需求情景如下:

    在一流程(称为:流程a)中,有多个环节,以各种不同的图标表示,当点击某一图标时,会出现弹出框,弹出框会再一次显示这一流程(称为:流程a'),用户可以通过点击弹出框中的某一图标查看对应时间轴。

    要求:用户可通过在流程a中点击查看对应时间轴,也可在弹出框中查看时间轴(时间轴的出现只在弹出框中)。

    showDrawer()方法实现弹出框与时间轴的显示,showTimeline()方法实现时间轴的显示。

    visible属性控制弹出层的显示与隐藏,active属性控制流程中环节图标的高亮。@show事件表示子组件son通过show调用父组件father的方法,做到弹出框/时间轴的显示。
// 子组件son.vue
<template>
  <div>
    <div v-for="(item, index) in stepList" :key="index">
      <div @click="show">{{item}}</div>
    </x-row>
  </div>
</template>

<script>

// js 部分代码
export default {
  methods: {
    show(item) {
      this.$emit("show", item);
    }
  }
};
</script>
  • 代码解释:
    子组件中stepList数组中包括流程各环节,通过click事件来调用父组件中的方法。

问题出现:

点击流程a的第二个图标,图标高亮,出现弹出框,流程a'相同图标高亮,且出现相应的时间轴。在流程a'中点击另一图标,会出现相应时间轴,但是:

问题1:流程a'的高亮图标与流程a的不同,换句话说,流程a的高亮图标不会随着流程a'的图标高亮而变化。

TODO:问题1待解决。

继续操作:

点击流程a'的第三个图标,该图标高亮,流程a还停留在第二个图标高亮,关闭弹出框,点击流程a的第一个图标,出现弹出框,流程a'的第三个图标高亮,并不是与流程a一致(正常效果应该是:点击流程a的第一个图标,流程a'的第一个图标高亮):

问题2:监听stepList和active数据变化,一切正常,时间轴显示数据正确,只是流程a'的图标高亮显示错误。

问题2根源:其实是子组件没有重新遍历新的stepList数组。
解决方法:流程a'强制刷新/重新渲染。在弹出框的son组件中添加*** :key="timer" ***

// 父组件father.vue
<template>
  <div class="wrap">
    <!-- 流程 -->
    <son @show="showPopup"></son>
    <!-- 弹出框 -->
    <div :visible="visible">
      <!-- 流程 -->
      <son :active.sync="active" @show="showTimeline" :key="timer"></son>
      <!-- 时间轴 -->
      <div>这是时间轴</div>
    </div>
  </div>
</template>

// js 部分代码
export default {
  data() {
    return {
      visible: false,
      timer: ""
    };
  },
  methods: {
    showPopup(item) {
      this.visible = true;
      this.timer = new Date().getTime(); // 时间戳做子组件son的key
      this.showTimeline(item); // 获取时间轴数据
    }
  }
};
</script>

谈谈子组件强制刷新/重新渲染的4种方法

v-if
:key=""

(睡了,后续补上...)

这篇关于[Vue]组件强制刷新/重新渲染的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!