[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]组件强制刷新/重新渲染的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！