v-model双向数据绑定，封装切换tabs组件

v-model原理

<input v-bind:value="message" v-on:input="message = $event.target.value">

这里 v-bind:value 是将 message 属性绑定到输入框的 value 上，而 v-on:input 是监听输入框的 input 事件来更新 message 的值。

$event.target表示事件目标，即触发事件的元素，而$event.target.value表示触发事件元素的值。

封装组件

子组件

<template>
    <div id="defaultId1" class=" uUE9lVc" @click="changeTab" :class="value==label ? 'active' : ''">{{ label}}</div>
</template>
<script>

    export default {
        name: '',
        props: {
            value:{
                type:String,
                default:''
            },

            label:{
                type:Number,
                default:''
            }
        },
 
        data() {
            return {
              
            }
        },
        methods: {
            changeTab(){
                //子组件向父组件通过input传递label值，
                //父组件通过v-bind:value 和v-on:input将value值重新赋值
                this.$emit('input', this.label)


            }
        },
        computed: {}
    }
</script>
<style>
    .active {
        background-color: green;
    }


</style>

父组件：

<template>
    <div class="tabsArr"> 
        <xiao_tabs id="g1f8e6" v-model="tabsTitle" label="状态"> </xiao_tabs>
        <xiao_tabs id="g1f8e6" v-model="tabsTitle" label="公司简介"> </xiao_tabs>
        <xiao_tabs id="g1f8e6" v-model="tabsTitle" label="公司控股"> </xiao_tabs>
        <xiao_tabs id="g1f8e6" v-model="tabsTitle" label="营运表现"> </xiao_tabs>
    </div>
</template>

<script>
import xiao_tabs from './../地址';
components: {
    xiao_tabs
}
<script>
<style>
.tabsArr{
    display: flex;
    justify-content: space-around;
    background-color: #ccc;
       
}
</style>