程序员小白182 2021-12-07 15:42 采纳率: 90.5%
浏览 562
已结题

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

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

  • 写回答

3条回答 默认 最新

  • ZionHH 2021-12-07 17:05
    关注

    那就只当它做一个标签组件,点击切换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
      }
    }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 12月16日
  • 已采纳回答 12月8日
  • 创建了问题 12月7日

悬赏问题

  • ¥65 LineageOs-21.0系统编译问题
  • ¥30 关于#c++#的问题,请各位专家解答!
  • ¥15 App的会员连续扣费
  • ¥15 不同数据类型的特征融合应该怎么做
  • ¥15 用proteus软件设计一个基于8086微处理器的简易温度计
  • ¥15 用联想小新14Pro
  • ¥15 multisim中关于74ls192n和DSWPK开关仿真图分析(减法计数器)
  • ¥15 w3wp,exe 中发生未处理的 Microsoft ,NETFramework 异常。
  • ¥20 C51单片机程序及仿真(加减器)
  • ¥15 AQWA | 水动力分析 二阶波浪力