ElementUI 踩坑解决：van-tabs传值监听不到，修改不到v-model:active，切换不了下标的；

项目场景：

提示：这里简述项目相关背景：

开发场景：在van-tabs第一页提交完 想切换到van-tabs第二页；

---

做法

提示：这里描述项目中遇到的问题：
做法：父组件调用van-tabs v-model=‘active‘，子组件watch监听modelValue的变化并修改子组件v-model：active的值

代码（只关注active的调用逻辑）：

	//父组件调用 van-tabs 在跳转的时候修改tabActive的值
	<van-tab
      :tabOptions="materialTypeList"
      v-model="tabActive"
    ></van-tab>
    
    

	//子组件：
	<van-tabs
	  class="sn-tab"
	  v-model:active="tabActive"
	  @click-tab="handleClick"
	  @change="onChange"
	>
	//自定义变量接收
	const tabActive = ref(props.modelValue || '0');
	watch(
	  () => props.modelValue,
	  async (val: number) => {
	    tabActive.value = val;
	  }
	);

---

问题：

一直切换不了；子组件的watch监听到父组件tabActive的修改后还是没法改到子组件的v-model:active;
使用onChange事件发现父组件传过来的值拿到了但是组件会重置active为0；

---

原因：

v-model:active绑定的需要接收数字类型

---

解决方案：

	//子组件：
	//自定义变量接收
	watch(
	  () => props.modelValue,
	  async (val: number) => {
	    tabActive.value = Number(val);
	  }
	);