Vue.sync修饰符与$emit(update:xxx)详解
更新时间：2022年11月11日 10:28:29 作者：我是ed.
这篇文章主要介绍了Vue.sync修饰符与$emit(update:xxx),实现思路非常简单，文章介绍了.sync修饰符的作用和使用.sync修饰符的写法，实现代码简单易懂对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
Vue .sync修饰符与$emit(update:xxx)
.sync修饰符的作用
在对一个 prop 进行“双向绑定,单向修改”的场景下，因为子组件不能直接修改父组件，sync在2.3版本引入，作为一个事件绑定语法糖，利用EventBus，当子组件触发事件时，父组件会响应事件并实现数据更新，避免了子组件直接修改父组件传过来的内容。
.sync修饰符之前的写法
父组件：
<parent :myMessage=“bar” @update:myMessage=“func”>
js定义函数:
func（val）{
this.bar = val;
}子组件，事件触发函数：
func2(){
this.$emit(‘update:myMessage',valc);
}也就是说，父组件需要传一个绑定值（myMessage）同时需要设置一个更新触发函数（func）给子组件修改绑定值的时候调用。
使用.sync修饰符的写法
会简化上面的写法，父组件不需要定义更新触发函数。
父组件：
<comp :myMessage.sync="bar"></comp>
子组件：
this.$emit('update:myMessage',valc);sync 修饰符与 $emit(update:xxx) ，驼峰法 和 - 写法的区别，使用.sync修饰符，即变量应该使用驼峰法：
// this.$emit('update:father-num',100); //无效
this.$emit('update:fatherNum',100); //有效
//......
<father v-bind:father-num.sync="test"></father>不适用 .sync 修饰符，变量应该使用 - ，即father-num
this.$emit('update:father-num',100); //有效
//this.$emit('update:fatherNum',100); // 无效
//......
<father v-bind:father-num="test" v-on:update:father-num="test=$event" ></father>但从实践中发现，用 .sync 修饰符，这两种写法都是有效的。
在vue之中，当父组件向子组件传递属性的时候，如下使用驼峰法
<cpn :cMives="movies"></cpn>
在子组件中props:[‘cMives’],是接收不到属性的，应该使用-来绑定属性，接收依旧使用驼峰法。
<cpn :c-mives="movies"></cpn>
综上，绑定时候用 “-”，接收和使用的时候用驼峰法，如果真的无效，再试试上面所说的那种情况。
到此这篇关于Vue.sync修饰符与$emit(update:xxx)的文章就介绍到这了,更多相关Vue.sync修饰符内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue Cli 3项目 使用融云IM实现聊天功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
最近在做自己项目中遇到一个非常简单的功能,跟大家分享下,这篇文章主要给大家介绍了关于使用vue写一个翻页的时间插件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
elementui使用el-upload组件实现自定义上传的详细步骤
upload上传是前端开发很常用的一个功能,在Vue开发中常用的Element组件库也提供了非常好用的upload组件,这篇文章主要给大家介绍了关于elementui使用el-upload组件实现自定义上传的详细步骤,需要的朋友可以参考下2023-12-12
vue3的defineExpose宏函数是如何暴露方法给父组件使用
当子组件使用setup后,父组件就不能像vue2那样直接就可以访问子组件内的属性和方法,这个时候就需要在子组件内使用defineExpose宏函数来指定想要暴露出去的属性和方法,本文介绍vue3的defineExpose宏函数是如何暴露方法给父组件使用,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了浅谈Vue页面级缓存解决方案feb-alive(下),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
本篇文章主要介绍了基于vue实现swipe分页组件实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要介绍了vue如何动态生成andv图标问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
本篇文章主要介绍了详解vue.js2.0父组件点击触发子组件方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
本篇文章主要介绍了浅谈vue-lazyload实现的详细过程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
这篇文章主要为大家详细介绍了Vue实现简单的拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
最新评论