vue vant移动端 van-tab 来回切换页面 不把页面写到里面 如何写

Question

<van-tabs type="card" @click="onClick"> 标签 单击事件
<van-tab title="a页面">代码</van-tab>我不想把代码写到里面去
<van-tab title="b页面">代码</van-tab>我不想把代码写到里面去
</van-tabs >
我是小白 想把代码提出来 切换标签 在<van-tabs>外的布局做切换

Answer 1

那就只当它做一个标签组件，点击切换component或路由

<van-tabs v-model="active" @click="handleTab">
  <van-tab v-for="item in tabList" :title="item.name"></van-tab>
</van-tabs>
<component :is="curCom"></component>

// script
import Component1 from '...'
...

data() {
  return {
    active: 0,
    tabList: [
      { name: '标签1', com: 'Component1' },
      { name: '标签2', com: 'Component2' },
      { name: '标签3', com: 'Component3' },
    ],
    curCom: 'Component1'
  }
},
methods: {
  handleTab(i) {
    this.curCom = this.tabList[i].com
  }
}