当前位置: 首页 > news >正文

【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>

欢迎指正!

http://www.lryc.cn/news/488827.html

相关文章:

  • repmgr安装及常用运维指令
  • RedHat系统配置静态IP
  • nvm和nrm的安装与使用
  • 10大核心应用场景,解锁AI检测系统的智能安全之道
  • 香豆烤馍:传统美食中的烟火记忆
  • 金融量化交易模型的探索与发展
  • 灾难恢复计划 (DRP)
  • Makefile 之 wordlist
  • 半导体工艺与制造篇1 绪论
  • 接雨水
  • Python蓝桥杯刷题1
  • 实习冲刺第二十七天
  • el-table-column自动生成序号在序号前插入图标
  • 前端工程化-node/npm/babel/polyfill/webpack 一文速通
  • Spring Security PasswordEncoder接口(密码编码)
  • C# 数据结构之【树】C#树
  • 树莓派2装FreeBSD14.1 Raspberry Pi2 install FreeBSD14.1 00000121:error:0A000086:SSL
  • 探索C/C++的奥秘之stack和queue
  • [开源]1.2K star!中后台方向的低代码可视化平台,超赞!
  • 算法编程题-排序
  • 【AIGC】如何准确引导ChatGPT,实现精细化GPTs指令生成
  • 【Axure高保真原型】或和且条件
  • KubeVirt下gpu operator实践(GPU直通)
  • Vue通过file控件上传文件到Node服务器
  • 如何在 SQL Server 中新增账户并指定数据库权限
  • c#编码技巧(十九):各种集合特点汇总
  • 汽车软件DevOps解决方案
  • 同步的意义以及机制
  • leetcode 面试150之 156.LUR 缓存
  • 启发式搜索算法复现