VUE组件第一次显示时再渲染

2020年04月16日作者:井井客来源:井井客整理

最近做的一个需求是关于信息采集中隐藏关联项,信息采集表单本身比较多,隐藏的关联项也有点多。就导致APP打开信息采集页面特别慢。所以在组件库上面做了调整,就是加入该功能。

实现起来也不难,主要利用的是VUE中的v-if和v-show渲染机制,

前提

因为要做的是组件第一次显示时才渲染,所以肯定还有第二次、第三次显示。那么这个组件就是一个可隐藏的组件,有一个关键属性,用于控制组件是否显示。 这个关键属性可以是从父组件props进来,或者computed计算等方式进行取值。

组件原来可能是用v-show显示,不论是否为第一次,它都会渲染。这时需要改为v-if,只有当它为真时才渲染。那么当这个关键属性设为真时,就不能再设为假。那么我们就可以像下面这样做,用另一个值用来记录是否为第一次(或者说已渲染)。

代码

大致就下面这样:

<template>
  <div v-if="inited">组件内容</div>
</template>
<script>
export default {
  props: {
    show: {
      type: Boolean || String,
      default: function () {
        return false;
      },
    },
  },
  data() {
    return {
      inited: false,
    };
  },
  mounted() {
    this.inited = this.show;
  },
  watch: {
    show(value) {
      if (value === true || value === "true") {
        this.inited = this.show;
      }
    }
  }
};
</script>

其中show这个值可以是父组件传进来的,也可以是子组件通过一些其它判断获取的值,而inited则是真实显示组件用的值。

就是这么简单的啦~

文章TAG:VUE

本文标题:VUE组件第一次显示时再渲染
本文链接:http://www.jingjingke.com/c/16366.html

上一篇:Animate CC之canvas动画玩耍篇
下一篇:没有了