最近做项目碰到一个问题：
问题
一个选项卡容器里有多个选项卡，每个选项卡都有很多内容，所以做成每个选项卡一个组件，正常写下去是这样的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <template>
<el-tabs v-model="activeName">
<el-tab-pane label="用户管理" name="first">用户管理
<el-comp-a></el-comp-a>
</el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理
<el-comp-b></el-comp-b>
</el-tab-pane>
<el-tab-pane label="角色管理" name="third">角色管理
<el-comp-c></el-comp-c>
</el-tab-pane>
</el-tabs>
</template>
<script>
import componentA from "@/components/componentA";
import componentB from "@/components/componentB";
import componentC from "@/components/componentC";
export default {
components: {
"el-comp-a": componentA,
"el-comp-b": componentB,
"el-comp-c": componentC,
},
data() {
return {
activeName: 'second'
};
}
};
</script>
|
其中这三个组件每个都有AJAX请求,这样就相当于打开这个页面就会同时发送三个请求，如果用户不点击配置管理和角色管理选项卡则多请求了两次
希望实现功能：
点击该选项卡的时候再做该选项卡的请求并展示数据
实现方案：
1
2
3
4
5
6
7
8
9
10
11
| <el-tabs v-model="activeName">
<el-tab-pane label="用户管理" name="first">用户管理
<el-comp-a v-if="activeName==first"></el-comp-a>
</el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理
<el-comp-b v-if="activeName==second"></el-comp-b>
</el-tab-pane>
<el-tab-pane label="角色管理" name="third">角色管理
<el-comp-c v-if="activeName==third"></el-comp-c>
</el-tab-pane>
</el-tabs>
|
只需增加v-if的条件判断即可。问题解决
因为v-if是惰性的
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
