求解一个关于mint-ui的tabbar页面之间切换触发事件的问题

Question

1、各个tab-item之间的切换有没有什么触发事件。
例如：

<mt-tabbar v-model="selected">
  <mt-tab-item id="外卖">
    <img slot="icon" src="../assets/100x100.png">
    外卖
  </mt-tab-item>
  <mt-tab-item id="订单">
    <img slot="icon" src="../assets/100x100.png">
    订单
  </mt-tab-item>
  <mt-tab-item id="发现">
    <img slot="icon" src="../assets/100x100.png">
    发现
  </mt-tab-item>
  <mt-tab-item id="我的">
    <img slot="icon" src="../assets/100x100.png">
    我的
  </mt-tab-item>
</mt-tabbar>

这个段代码里，当我从外卖页面点击到订单页面，有没有什么触发事件。

我现在的疑问就是怎么实现点击到对应选卡项时候再加载对应页的数据。有没有什么触发事件

Answer 1

<mt-tabbar v-model="selected">
官方文档已经说明了，tabbar 有 value属性是 选中的项的id值。文档

选中的id：{{selected}}

<mt-tabbar v-model="selected">
  <mt-tab-item id="外卖">
    <img slot="icon" src="../assets/100x100.png">
    外卖
  </mt-tab-item>
  <mt-tab-item id="订单">
    <img slot="icon" src="../assets/100x100.png">
    订单
  </mt-tab-item>
  <mt-tab-item id="发现">
    <img slot="icon" src="../assets/100x100.png">
    发现
  </mt-tab-item>
  <mt-tab-item id="我的">
    <img slot="icon" src="../assets/100x100.png">
    我的
  </mt-tab-item>
</mt-tabbar>


data(){
    return { selected: '外卖'}
},
watch: {
    selected: function (val, oldVal) {
        // 这里就可以通过 val 的值变更来确定
        console.log(val)
    }
}