组件通信之双向数据绑定（1）-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45608414/article/details/136618918

本文详细解释了Vue2中的v-model语法糖如何简化数据绑定，并通过父子组件交互的实例演示了其实现原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v-model语法糖详解：

//父组件
//v-model 语法糖相当于帮我们自动完成了变量的接收和事件的监听
<son :value="price" @input=" price= $event"></son>

我们看具体案例（vue2)

父组件部分：

<template>
<div>
    <div class="main">
        我是 father 组件
        
         {{price}}

        <son v-model="price"></son>
<!--        <son :value="price" @input=" price = $event" type="text"></son>-->
    </div>
</div>
</template>

<script>
import son from "@/components/sonCom.vue";
export default {
    name: "fatherCom",
    components: {
        son,
    },
    data() {
        return {
            price: '100gbfg',
        }
    },
    updated(){
        console.log(this.price)
    }
}
</script>

<style scoped>
    .main {
        border: 1px solid #222222;
        padding: 20px;
    }
</style>

子组件：

<template>
    <div class="box">
        <p class="title">我是son组件</p>
 
        <div class="twoModel">
            <div style="border: 1px solid #000">
                <p>v-model 双向绑定</p>
            <input :value="value" @input="dateValue($event.target.value)">
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "sonCom",
    inject: ['title', 'obj'],

    props:{
        // v-model 双向绑定练习
        value:{
            type: String,
            default: ''
        }
    },

    methods: {
        dateValue(val) {
            this.$emit('input', val)
        }
    }
}
</script>

效果图：