Vue.js 中使用 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 时，会重新渲染对应的子组件。