深入解读Vue修饰符sync

看到好多人在问这个问题，特意翻了翻以前的笔记，写了一篇比较详细的博文供大家参考

在一些情况下，我们可能会需要对一个 prop （父子组件传递数据的属性）进行“双向绑定”。
在vue 1.x 中的 .sync 修饰符所提供的功能。当一个子组件改变了一个带 .sync 的prop的值时，这个变化也会同步到父组件中所绑定的值。
这很方便，但也会导致问题，因为它破坏了单向数据流。（数据自上而下流，事件自下而上走）
由于子组件改变 prop 的代码和普通的状体改动代码毫无区别，所以当你光看子组件的代码时，你完全不知道它合适悄悄地改变了父组件的状态。

<comp :foo.sync="bar"></comp>

会被扩展为：

<comp :foo="bar" @update:foo="val => bar = val"></comp>

当子组件需要更新 foo 的值时，它需要显式地触发一个更新事件：

this.$emit('update:foo', newValue)

猛一看不明白，下边我么通过一个实例（弹窗的关闭事件）来说明这个代码到底是怎么运用的。

<template>
    <div class="details">
        <myComponent :show.sync='valueChild' style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"></myComponent>
        <button @click="changeValue">toggle</button>
    </div>
</template>
<script>
import Vue from 'vue'
Vue.component('myComponent', {
     
     
      template: `<div v-if="show">
                    <p>默认初始值是{
      
      {show}}，所以是显示的</p>
                    <button @click.stop="closeDiv">关闭</button>
                 </div>`,
      props:['show'],
      methods: {
     
     
        closeDiv() {
     
     
          this.$emit('update:show', false); //触发 input 事件，并传入新值
        }
      }
})
export default{
     
     
    data(){
     
     
        return{
     
     
            valueChild:true,
        }
    },
    methods:{
     
     
        changeValue(){
     
     
            this.valueChild = !this.valueChild
        }
    }
}
</script>

在这里插入图片描述
vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。如果我们不用.sync，我们想做上面的那个弹窗功能，我们也可以props传初始值，然后事件监听，实现起来也不算复杂。这里用sync实现，只是给大家提供一个思路，让其明白他的实现原理，可能有其它复杂的功能适用sync。

前端的学习不是一蹴而就，不积跬步无以至千里，不积小流无以成江海。持续不断的努力才能让你我有所收获，如果你也喜欢前端，也像我一样正在努力着，不妨看一看我的置顶文章，希望能与你一同进步。

深入解读Vue修饰符sync

猜你喜欢