.sync

使用update更新父组件的数据

//父组件
<template>
    <div>
        父组件：{{title}}
        <childDom :title="title" @update:title="title=$event"></childDom>
    </div>
</template>

<script>
import childDom from '../components/Father3-Child'
export default {
    data(){
        return {
            title:'简单我的简单'
        }
    },
    components:{childDom}
}
</script>

//子组件
<template>
    <div>
        <div>子组件：{{title}}</div>
        <button @click="$emit('update:title','哈哈哈')">点我更新父组件的数据</button>
    </div>
</template>

<script>
export default {
    props:['title'],
}
</script>

点击前
点击后

为了方便起见，我们为这种模式提供一个缩写，即 .sync 修饰符：

//父组件
<template>
    <div>
        父组件：{{title}}
        <childDom :title.sync="title"></childDom>
    </div>
</template>

<script>
import childDom from '../components/Father3-Child'
export default {
    data(){
        return {
            title:'简单我的简单'
        }
    },
    components:{childDom}
}
</script>

//子组件
<template>
    <div>
        <div>子组件：{{title}}</div>
        <button @click="$emit('update:title','哈哈哈')">点我更新父组件的数据</button>
    </div>
</template>

<script>
export default {
    props:['title'],
}
</script>

注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的属性名，类似 v-model。

.sync常用于关闭弹框

//父组件
<template>
    <div>
        弹框是否显示：{{showDialog}}
        <childDom :showDialog.sync="showDialog" v-if="showDialog"></childDom>
        <button @click="showDialog=true">显示弹框</button>
    </div>
</template>

<script>
import childDom from '../components/Father3-Child'
export default {
    data(){
        return {
            showDialog:false,
        }
    },
    components:{childDom}
}
</script>

//子组件
<template>
    <div>
        <div class="dialog">
            <div class="content">
                <div>我是弹框</div>
                <button @click="$emit('update:showDialog',false)">点我关闭弹框</button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props:['showDialog'],
}
</script>

<style scoped>
.dialog{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.5);}
.content{width:200px;height:200px;position: absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;}
</style>