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中数组变动的检测，文中给出了详细的示例代码和过程介绍，相信会对大家的理解和学习很有帮助，有需要的朋友们下面来一起看看吧。2016-10-10
相信很多人在用Vue使用别人的组件时,会用到 Vue.use() ,例如：Vue.use(VueRouter)、Vue.use(MintUI),这篇文章主要给大家介绍了关于Vue中Vue.use()的原理及基本使用的相关资料,需要的朋友可以参考下2021-10-10
vue.js 使用v-if v-else发现没有执行解决办法
这篇文章主要介绍了vue.js 使用v-if v-else发现没有执行解决办法的相关资料,需要的朋友可以参考下2017-05-05
这篇文章主要给大家介绍了关于vue在html标签{{}}中调用函数的方法总结及对比,文中通过实例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2023-03-03
在Vue.js中页面跳转是前端开发中常见的需求,Vue提供了多种页面跳转方式,这篇文章主要给大家介绍了关于vue跳转方式的常见方式以及区别分析的相关资料,需要的朋友可以参考下2024-02-02
ElementUI 组件之Layout布局(el-row、el-col)
这篇文章主要介绍了ElementUI 组件之Layout布局(el-row、el-col),本文通过实例代码图文相结合给大家介绍的非常详细,感兴趣的朋友一起看看吧2024-07-07
这篇文章主要为大家详细介绍了Vue左滑组件slider的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
Vuex中的映射允许您将state中的任何属性(state、getter、mutation和action)绑定到组件中的计算属性,并直接使用state中的数据，下面我们来详细了解2022-09-09
本文主要介绍了Vue实现DOM元素拖放互换位置示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
vue+elementUI组件tree如何实现单选加条件禁用
这篇文章主要介绍了vue+elementUI组件tree如何实现单选加条件禁用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
最新评论