15. Vue2.4+新增屬性.sync

.sync

在vue2.4之前，父組件向子組件傳值用props；子組件不能直接更改父組件傳入的值，須要經過$emit觸發自定義事件，通知父組件改變後的值。

父組件：

<template>
  <div>
      <p>父組件傳入子組件的值：{{name}}</p>
    <fieldset>
      <legend>子組件</legend>
      <child :val.sync="name">
      </child>
    </fieldset>
  </div>
</template>

<script>
import child from './child';
export default {
    components:{child},
    data: function () {
        return {
            name:'hello'
        }
     },
    methods: {
        
    }
}
</script>

<style>

</style>

子組件：

<template>
  <div style="margin-top: 300px;margin-left: 500px;">
    <label class="child">
        輸入框：
       <input :value=val @input="$emit('update:val',$event.target.value)"/>
    </label>
  </div>
</template>

<script>
export default {
    name:'child',
    props:{
        val:String
    },
    data()  {
        return {
        }
    },
    methods: {
    }
}
</script>

<style>

</style>

寫法上簡化了一部分，很明顯父組件不用再定義方法檢測值變化了。其實只是對之前的$emit方式的一種縮寫，.sync其實就是在父組件定義了一update:val方法，來監聽子組件修改值的事件。

參考：https://www.jianshu.com/p/4649d317adfe