vue中.sync修饰符，实现子组件实时更新父组件的值

vue 修饰符sync的功能是：当一个子组件改变了一个 prop 的值时，这个变化也会同步到父组件中所绑定。

不过它有一个前身，先来看看.sync出现之前是如何实现的

父组件中（传递给子组件一个值：propObj）

<template>
  <div>
    <Lala :propObj="lalala"
          v-on:update:propObj="lalala = $event"
    ></Lala>
  </div>
  
</template>

<script>
import Lala from '@/components/lala.vue';

export default {
  components:{
    Lala
  },
  data(){
    return {
      lalala:{name:"哈哈"},
    }
  }
}
</script>

子组件中（点击事件去更新父组件的值）

<template>
    <div><el-button @click="dd()">自定义组件内的按钮</el-button>
    </div>
</template>

<script>
export default {
    props:['propObj'],//外部传值
    methods:{
        dd(){  
            if(this.propObj.name==2){
                this.propObj.name="哈哈";
                this.$emit('update:propObj', this.propObj)
            }else{
                this.propObj.name=2;
                this.$emit('update:propObj', this.propObj)
            }
            
        }
    }
}
</script>

下面用vue 修饰符sync来实现，会更简洁

父组件中

<template>
  <div>
    <Lala v-bind:propObj.sync="lalala"></Lala>
  </div>
  
</template>

<script>
import Lala from '@/components/lala.vue';

export default {
  components:{
    Lala
  },
  data(){
    return {
      lalala:{name:"哈哈"},
    }
  }
}
</script>

子组件中保持不变

vue中.sync修饰符，实现子组件实时更新父组件的值

推荐阅读