数据是开发中不可缺少的一部分，对于数据处理也因情况而不一致。在数据处理中关于数据的双向绑定处理是极为重要的一部分。

本篇文章来介绍基于vue3如何实现父子组件之间的双向绑定。

效果如下：效果样式基于ant-design-vue

一、vue3双向绑定父级代码

<template>
    <div>
        数据一：{{ test.data }}
        <numItem v-model:proData= test.data ></numItem>
        数据二：{{ test.data1 }}
        <numItem v-model:proData= test.data1 ></numItem>
    </div>
</template>
<script lang="ts">
import { defineComponent , reactive } from 'vue';
export default defineComponent({
    setup () {
        const test = reactive({
            data:1,
            data1:1112,
        })
        return {
            test
        }
    }
})
</script>

二、vue3双向绑定子组件numItem.vue代码

<template>
    <a-input  
        class="numChang"
        :class="[proData<=1?'disableClick':'']"
        size="small"
        :value="proData"
        @input="$emit('update:proData', $event.target.value)" >
        <template class="oip" #addonBefore>
            <MinusOutlined  @click="$emit('update:proData', (proData-1)<1?1:(proData-1))"/>
        </template>
        <template #addonAfter>
            <PlusOutlined @click="$emit('update:proData', proData+1)"/>
        </template>
    </a-input>
</template>
<script lang="ts">
    import { reactive } from "vue";
    import { PlusOutlined,MinusOutlined } from '@ant-design/icons-vue';
    export default {
        components:{ PlusOutlined,MinusOutlined},
        props: {
            proData: {
                type:Number,
                default:1
            },
            
        },
        emits:['update:proData'],
        setup (props, context) {
        }
    }
</script>
<style scoped lang="scss">
.disableClick :deep( .ant-input-group-addon:first-child){
    cursor: no-drop !important;
    opacity: 0.5;
}
.disableClick :deep(.ant-input-group-addon:first-child .anticon ){
    cursor: no-drop !important;
    opacity: 0.5;
}
.numChang :deep( .ant-input-group-addon){
    padding:0 7px;
    font-size: 12px;
    cursor: pointer;
} 
</style>

效果样式基础说明：组件只能输入数字，当数字等于1时。禁止点击即减少数量。