vue 修飾子.sync

.sync 修飾子は vue1.0 で初めて登場し、vue2.0 で削除されましたが、その後、この修飾子は実際のプロジェクトでもまだ使用できることが判明しました。したがって、.sync は vue2.3.0 で構文糖として再導入されました。

:prop.sync="val" は、:prop="val" および @update:prop="val => prop = val" の糖衣構文です。 例:
< Child :id.sync="userId" /> は < Child : id="userId" @update:id="val => userId = val" / > の糖衣構文

// 父组件 parent.vue
<template>
    <div>
        <Child :id.sync="userId" />
    </div>
</template>

<script>
import Child from './child.vue'
export default {
    
    
    name: 'parent',
    componnets: {
    
     Child },
    data() {
    
    
        return {
    
    
            userId: 1
        }
    }
}
</script>

サブコンポーネントが id の値を更新する必要がある場合

// 子组件 child.vue
<template>
    <div>
        <p>{
    
    {
    
     id }}</p>
        <button @click="add">id 加 1<button>
    </div>
</template>

<script>
export default{
    
    
    name: 'child',
    props: {
    
    id: Number},
    methods: {
    
    
        add(){
    
    
            let res = this.id + 1
            this.$emit('update:id', res)
        }
    }
}
</script>

概要: .sync の機能は、子コンポーネントが prop を変更するときに、親コンポーネントのバインディングを同期することです。これは v-model 構文に似ています。