vue中的.sync修饰符用法及原理分析
更新时间：2022年04月13日 10:57:36 作者：`、ratel
这篇文章主要介绍了vue中的.sync修饰符用法及原理分析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
.sync修饰符用法及原理
vue中我们经常会用v-bind(缩写为:)给子组件传入参数。
或者我们会给子组件传入一个函数，子组件通过调用传入的函数来改变父组件的状态。
例如
//父组件给子组件传入一个函数
<MyFooter :age="age" @setAge="(res)=> age = res">
</MyFooter>
//子组件通过调用这个函数来实现修改父组件的状态。
mounted () {
console.log(this.$emit('setAge',1234567));
}这时子组件触发了父组件的修改函数使父组件的age修改成了1234567
这种情况比较常见切写法比较复杂。于是我们引出今天的主角 .sync
这时我们可以直接这样写
//父组件将age传给子组件并使用.sync修饰符。
<MyFooter :age.sync="age">
</MyFooter>
//子组件触发事件
mounted () {
console.log(this.$emit('update:age',1234567));
}这里注意我们的事件名称被换成了update:age
update：是被固定的也就是vue为我们约定好的名称部分
age是我们要修改的状态的名称，是我们手动配置的，与传入的状态名字对应起来
这样就完成了，是不是感觉简单了很多。
注意事项：
这里我们必须在事件执行名称前加上update：的前缀才能正确触发事件。
.sync修饰符的用法总结
需求描述
最近项目中需要在父子组件中实现数据双向传递的功能。
解决方案
在vue中我们知道props传递的属性只能实现数据的单向流动，如果我们要实现逆向传递的功能一般通过this.$emit()来触发方法来实现，使用.sync修饰符只需要通过this.$emit()来触发属性就能实现。
// 父组件使用 .sync 传递
:page.sync="searchForm.page"
// 子组件使用 'update:' 触发
this.$emit('update:page', data)注意：在uniapp项目中的某些情况下不能正常使用。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了VUE使用router.push实现页面跳转和传参方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
下面小编就为大家分享一篇vue.js 获取select中的value实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
vite.config配置alias Error: ENOTEMPTY: director
这篇文章主要为大家介绍了vite.config配置alias时报错：Error: ENOTEMPTY: directory not empty, rmdir解决方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要为大家详细介绍了Vue+canvas实现视频截图功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
本文主要介绍了Vue中this.$nextTick()的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章主要介绍了Vue 防止短时间内连续点击后多次触发请求的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
本文主要介绍了VantUI封装自定义Tabbar路由跳转的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
这篇文章主要介绍了Vue源码之rollup环境搭建步骤详解,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要为大家介绍了vue使用 monaco editor 汉化右键菜单实现汉化示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了vue+express+jwt持久化登录的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
最新评论