深入理解双向绑定和父子组件数据同步的使用方法及原理

前言

在日常项目开发中我们经常会使用 v-model对输入框进行 数据双向绑定，并且当父子组件需要数据同步时，会使用sync修饰符使数据同步，虽说用起来挺爽的，但入门的vue不久或没有深入理解原理小伙伴却会有疑惑? 他们是如何实现的?当你明白其原理才能够更好的理解和使用它，接下来将介绍它们使用方法并解释其中原理

v-model为双向绑定的语法糖 动态绑定value值 通过@input事件监听值的变化 在事件对象获取value值赋值data中动态绑定的值 从而实现双向绑定

    <input type="text" :value="value" @input="value=$event.target.value">
    export default{
        data(){
            return {
                value:''
            }
        }
    }

sync修饰符实现父子组件数据同步

//父组件
<child :message.sync="message"></child>
export default{
    data(){
        return {
            message:5
        }
    }
}

//child子组件
<div>
    <span>{{message}}</span>
    <button @click="$emit("update:message",message+1)">修改数据</button>
</div>
export default{
   props:{
       message:{
           type:String,
           default:''
       }
   }
}

sync修饰符实现原理 注意：使用@update:message事件监听子组件发送的事件 ($event固定写法 获取子组件传递的参数)

//父组件
<child :message="message" @update:message="message=$event"></child>
export default{
    data(){
        return {
            message:5
        }
    }
}

//child子组件
<div>
    <span>{{message}}</span>
    <button @click="$emit("update:message",message+1)">修改数据</button>
</div>
export default{
   props:{
       message:{
           type:String,
           default:''
       }
   }
}