WSの小屋

原理解析：

v-if的展示与隐藏，都会让组件重新挂载。

而v-show的展示与隐藏，只是改变组件的display属性，组件在一开始就挂载好了。

因此若是只用v-if，会导致tab页切换时都会重新挂载，而若是只用v-show，会导致所有的tab页在一开始全部同时挂载。

理想的情况是默认挂载第一页，等到切到对应的tab页时，再去挂载它们。而已经挂载的，也不会被注销掉，会保留状态。

直接上代码：

vue 复制代码 
<script setup lang="ts">
const { active = "default" } = defineProps<{
  active?: string;
}>();

const set = reactive(new Set());

watch(
  () => active,
  () => set.add(active),
  {
    immediate: true,
  }
);
</script>

<template>
  <div v-for="item in Object.keys($slots)" v-show="item == active" :="$attrs">
    <slot v-if="set.has(item)" :name="item" />
  </div>
</template>

用法：

vue 复制代码 
<lazy-view :active="active">
  <template #页面1>
    <page1></page1>
  </template>
  <template #页面2>
    <page2></page2>
  </template>
  <template #页面3>
    <page3></page3>
  </template>
</lazy-view>

这样通过控制active这个变量的值，就可以以懒加载的形式展示与切换这三个页面

Comments | 0条评论