h5-colexiu/src/student/music/personal/index.tsx

import { Tab, Tabs } from 'vant'
import { defineComponent, onMounted, ref } from 'vue'
import AlbumList from '../album'
import Practice from './practice'
import Personal from './personal'
import Collection from './collection'
import Album from './album'

import styles from './index.module.less'

export default defineComponent({
  name: 'MusicPersonal',
  setup() {
    const activeTab = ref('personal')
    const personal = ref()
    const collection = ref()
    const practice = ref()

    return () => {
      return (
        <div class={styles.personal}>
          <Practice
            ref={practice}
            onFavorite={() => {
              if (activeTab.value === 'personal') {
                personal.value?.reset?.()
              } else if (activeTab.value === 'collection') {
                collection.value?.reset?.()
              }
            }}
          />
          <Tabs
            color="var(--van-primary)"
            background="transparent"
            lineWidth={20}
            shrink
            v-model:active={activeTab.value}
            onChange={val => (activeTab.value = val)}
          >
            <Tab title="我的单曲" name="personal"></Tab>
            <Tab title="收藏单曲" name="collection"></Tab>
            <Tab title="收藏专辑" name="album"></Tab>
          </Tabs>
          {activeTab.value === 'personal' && (
            <Personal
              ref={personal}
              onFavorite={() => {
                practice.value?.reload?.()
              }}
            />
          )}
          {activeTab.value === 'collection' && (
            <Collection
              ref={collection}
              onFavorite={() => {
                practice.value?.reload?.()
              }}
            />
          )}
          {activeTab.value === 'album' && <Album />}
        </div>
      )
    }
  }
})