【Vant】局部刷新组件

今天在用 VantUI 组件库中的 Tab 组件的时候遇到这样一个需求：

当页面处于全部tab页签下时，tab栏左边不显示复选框，其他情况则显示复选框，且当进行搜索操作时，tab页签自动回到全部tab页签下。

这个功能使用组件提供的插槽以及点击事件很容易实现，但是，在实现后面搜索操作页签自动跳回全部tab页签下时遇到了问题：

如图，页签下的小横条错位了。

打开控制台可以发现这个横条的样式是动态计算的，当我们触发组件自身的点击事件的时候，会重新计算 translateX 的值，但是当我们在组件外部改变tab组件的值时，是无法触发重新计算的，因此也就导致了小横条的错位显示。

当时想的解决思路是通过 v-if 来重新渲染组件，但是发现这样太过复杂，没有采用，后来发现了新的方法，那就是 使用 key属性 来让组件重新渲染，去了解一下v-for中为什么要绑定key，就可以明白这个操作的原理了。

下面是解决思路：

1. 给tab组件 key 属性绑定一个 value，一般建议是时间戳；
2. 当执行搜索事件的时候，把新获取到的时间戳赋值给 key；

<!-- 页签栏 -->
<van-tabs :key="tabKey" @click="onTabClick">
  <van-tab title="全部" />
  ...
</van-tabs>

// 在生命周期中初始化
created() {
  this.tabKey = Date.now()
},
// 搜索函数中重新赋值
onSearch() {
  this.tabKey = Date.now()
},