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中js实现点击复制文本到剪贴板的3种方案,文中通过代码介绍的非常详细,需要的朋友可以参考下2023-09-09
今天小编就为大家分享一篇Vue引用Swiper4插件无法重写分页器样式的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue实现图书管理，分享了图书管理demo用的知识点，以及遇到问题的总结，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
这篇文章主要介绍了详解Vue2.0配置mint-ui踩过的那些坑，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
vue3项目导入异常Error:@vitejs/PLUGIN-vue requires vue (＞=3.2.13
这篇文章主要给大家介绍了关于vue3项目导入异常Error:@vitejs/PLUGIN-vue requires vue (＞=3.2.13)的解决办法,文中将解决办法介绍的非常详细,需要的朋友可以参考下2024-01-01
关于iview和elementUI组件样式覆盖无效问题及解决
这篇文章主要介绍了关于iview和elementUI组件样式覆盖无效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
本文主要介绍了Vue-Element-Admin前端接入SSO的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
这篇文章主要介绍了基于elementUI竖向表格、和并列的案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
vuejs是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。今天给大家分享一篇教程关于Vue.js 60分钟快速入门教程，一起看看吧2017-03-03
本篇文章主要介绍了详解vue组件通信的三种方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
最新评论