vue .syncの使い方

場合によっては、propを「双方向バインド」する必要がある場合があります.つまり、子コンポーネントで値を変更したい場合、親コンポーネントの値も変化します.
 
syncを使わない
親コンポーネント

import Blog from './components/Blog'

export default {
  name: 'app',
  data () {
    return {
      d:1
    }
  },
  components: {
    Blog
  }
}

サブアセンブリ

  export default {
    name: "blog",
    props: ['num'],
    data(){
      return {
        cur: 1
      }
    },
    created(){
      this.cur = this.num
    },
    methods:{
      fn(){
        this.cur ++
        this.$emit('change',this.cur)
      }
    }
  }

syncの使用
親コンポーネントでこの文を変更

{{d}}

サブアセンブリでこの文を変更

this.$emit('update:num',this.cur)

文字通り、親コンポーネントがnumに転送され、サブコンポーネントが変更されると、この転送値が更新されます.