【vue】vue中.sync修饰符如何使用--详细代码对比

.sync修饰符作用

.sync修饰符是一个语法糖，可以简化父子组件通信操作，当子组件想改变父组件数值时，父组件只需要使用.sync修饰符，子组件使用props接收属性，再使用this.$emit('update:属性', 值);就可以实现子组件更新父组件数据的操作。

以下将用el-dialog例子展示传统父子通信及使用.sync修饰符后的父子通信区别：

传统父子通信

//父组件
<template><div><button @click="openDialog">打开对话框</button>
<!--给子组件传递dialogVisible属性--><ChildDialog :dialogVisible="dialogVisible" @updateDialogVisible="handleDialogVisibleChange"></ChildDialog></div>
</template><script>
import ChildDialog from './ChildDialog.vue';export default {components: {ChildDialog},data() {return {dialogVisible: false};},methods: {openDialog() {this.dialogVisible = true;},
//收到子组件传来的新值，更新dialogVisible handleDialogVisibleChange(newVisible) {this.dialogVisible = newVisible;}}
};
</script>//子组件
<template><el-dialog :visible="dialogVisible" @close="closeDialog"><span>这是对话框内容</span></el-dialog>
</template><script>
export default {props: {dialogVisible: {type: Boolean}},methods: {closeDialog() {
//自定义监听事件，将新值传给父组件this.$emit('updateDialogVisible', false);}}
};
</script>

.sync修饰符父子通信

//父组件
<template><div><button @click="dialogVisible = true">打开对话框</button>
<!--父组件不需要再绑定监听事件获取新值再赋给dialogVisible.sync修饰符可以自动完成数据更新操作，更简洁--><ChildDialog :dialogVisible.sync="dialogVisible"></ChildDialog></div>
</template><script>
import ChildDialog from './ChildDialog.vue';export default {components: {ChildDialog},data() {return {dialogVisible: false};}
};
</script>//子组件
<template><el-dialog :visible="dialogVisible" @close="closeDialog"><span>这是对话框内容</span></el-dialog></template><script>
export default {props: {dialogVisible: {type: Boolean}},methods: {closeDialog() {
//告诉父组件哪个属性更新并且传新值this.$emit('update:dialogVisible', false);}}
};
</script>

欢迎指正！