开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 3 天，点击查看活动详情

前言

最近写项目遇到一个小bug 在这记录一下，以防下次还遇到该问题，分享给大家，相互学习，共同进步！

1.使用场景

看官方图该方法的基本使用方式如下:

由图可看出即是简单的渲染，如果下方换成子组件，首次加载默认会切换的标签页都同时渲染，如下：

<el-tabs
        v-model="activeName"
        @tab-click="handleClick">
        <el-tab-pane
          v-for="item in array"
          :key="item.name"
          :label="item.name"
          :name="item.text">
          <table-list :user-type="activeName" />
        </el-tab-pane>
      </el-tabs>

const array = [
  {
    text: 'user',
    name: '个人用户'
  },
  {
    text: 'business',
    name: '企业用户'
  }
];
const activeName = ref<string>('user');
const handleClick = (tab: TabsPaneContext) => {
  activeName.value = tab.props.name as string;
};

并且我的子组件收到的userType都是等于如下：

也就是说哎呀竟然不是动态传值给子组件？？？，就算我切换了tab，其实际默认也就渲染了一次，并不是动态渲染的，也就是说默认这个tab标签都是同时渲染的呢，不管你切换不切换，就直接给你渲染了。

2.解决方案

一开始自己想了很多方式，都没法解决这种情况，差点想自己写画一个解决算了，然而咱们就是吃了不认真看文档的亏!原来官方给了一个属性：

好吧，其实只要这一个属性就能解决以上问题！没想到就这一个问题还浪费了点时间解决！

<el-tabs
        v-model="activeName"
        @tab-click="handleClick">
        <el-tab-pane
          v-for="item in array"
          :key="item.name"
          lazy
          :label="item.name"
          :name="item.text">
          <table-list :user-type="activeName" />
        </el-tab-pane>
      </el-tabs>