标签：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,高亮,渲染,流程,弹出,时间轴,组件,图标
来源： https://www.cnblogs.com/deng3/p/15341164.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。