vue3组件内实现v-model

1、实现效果

2、思路 

1）高亮的activeTab属性绑定到modelValue(prop)

2)  触发tab栏时，触发update:modelValue

3、组件代码

1）HTML

<div class="my_tabs">
        <div class="tab_nav" v-for="item in data.tabArr" :key="item.key" @click="tabClick(item)" :class="item.isActive? 'tab_nav_active' : 'tab_nav_normal">
            <div class="my_tabs_nav_title">{{ item.title }}</div>
        </div>
    </div>

2) ts

const props = defineProps({
    modelValue: {
        type:[String,Number]
    },
    tabArr: {
        type: Array,
        default: () => {
            return [{title:'tab栏1'},{title:'tab栏2'}]
        }
    }
})

const $emit = defineEmits(["tab-click","update:modelValue"])

const data:any = reactive({activeTab: '',tabArr: []})

// 监听modelValue赋值给activeTab
watch(
    () => props.modelValue,
    (val):void => {data.activeTab = val},
    {immediate:true}
)

onMounted ( () => {
    nextTick(() => {
     // 遍历props.tabArr,title,isActive赋值给data.tabArr;
     // props.modelValue查找数组中某个isActive为true
     // .....
    })
})

const tabClick = (item:any) => {
    $emit('update:modelValue', item.name)
    $emit('tabClick', item)
}