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>

子組件中保持不變