切换van-tab时从新渲染组件

要在切换van-tab时重新渲染组件，您可以使用Vue的动态组件来实现。

首先，在父组件中，您可以使用van-tab组件的@change事件来监听tab切换，并更新一个数据属性来动态切换需要渲染的子组件。例如：

<template>
  <div>
    <van-tabs v-model="activeTab" @change="handleTabChange">
      <van-tab title="Tab 1">
        <component :is="currentComponent"></component>
      </van-tab>
      <van-tab title="Tab 2">
        <component :is="currentComponent"></component>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0,
      currentComponent: 'Component1' // 初始渲染的子组件
    };
  },
  methods: {
    handleTabChange(index) {
      // 根据切换的tab更新需要渲染的子组件
      if (index === 0) {
        this.currentComponent = 'Component1';
      } else if (index === 1) {
        this.currentComponent = 'Component2';
      }
    }
  },
  components: {
    Component1: { /* Tab 1对应的组件 */ },
    Component2: { /* Tab 2对应的组件 */ }
  }
};
</script>

然后，在子组件中，您可以定义各自的模板和逻辑。例如：

<template>
  <div>
    <!-- 子组件的内容 -->
  </div>
</template>

<script>
export default {
  // 子组件的逻辑
};
</script>

这样，当切换van-tab时，会重新渲染对应的子组件