麻城网站设计,电工学高等教育出版社久久建筑网,网站建设标志图,巢湖市建设工程网站.sync修饰符作用
.sync修饰符是一个语法糖#xff0c;可以简化父子组件通信操作#xff0c;当子组件想改变父组件数值时#xff0c;父组件只需要使用.sync修饰符#xff0c;子组件使用props接收属性#xff0c;再使用this.$emit(update:属性, 值);就可以实现子组件更新父….sync修饰符作用
.sync修饰符是一个语法糖可以简化父子组件通信操作当子组件想改变父组件数值时父组件只需要使用.sync修饰符子组件使用props接收属性再使用this.$emit(update:属性, 值);就可以实现子组件更新父组件数据的操作。
以下将用el-dialog例子展示传统父子通信及使用.sync修饰符后的父子通信区别
传统父子通信
//父组件
templatedivbutton clickopenDialog打开对话框/button
!--给子组件传递dialogVisible属性--ChildDialog :dialogVisibledialogVisible updateDialogVisiblehandleDialogVisibleChange/ChildDialog/div
/templatescript
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//子组件
templateel-dialog :visibledialogVisible closecloseDialogspan这是对话框内容/span/el-dialog
/templatescript
export default {props: {dialogVisible: {type: Boolean}},methods: {closeDialog() {
//自定义监听事件将新值传给父组件this.$emit(updateDialogVisible, false);}}
};
/script
.sync修饰符父子通信
//父组件
templatedivbutton clickdialogVisible true打开对话框/button
!--父组件不需要再绑定监听事件获取新值再赋给dialogVisible.sync修饰符可以自动完成数据更新操作更简洁--ChildDialog :dialogVisible.syncdialogVisible/ChildDialog/div
/templatescript
import ChildDialog from ./ChildDialog.vue;export default {components: {ChildDialog},data() {return {dialogVisible: false};}
};
/script//子组件
templateel-dialog :visibledialogVisible closecloseDialogspan这是对话框内容/span/el-dialog/templatescript
export default {props: {dialogVisible: {type: Boolean}},methods: {closeDialog() {
//告诉父组件哪个属性更新并且传新值this.$emit(update:dialogVisible, false);}}
};
/script 欢迎指正
