vue sync用法,vue中sync作用

　　本文主要介绍了的用法和原理分析。vue中的sync修改器，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

　　:

目录

　　.sync修饰符的用法和原理，例如。sync modifier总结了需求并描述了解决方案。

.sync修饰符用法及原理

　　在vue中，我们经常使用v-bind(缩写为：)给子组件传入参数。

　　或者我们会给子组件传递一个函数，子组件通过调用传递的函数来改变父组件的状态。

例如

　　//父组件将函数传递给子组件

　　my footer:age= age @ setAge=(RES)=age=RES

　　/MyFooter

　　//子组件可以通过调用此函数来修改父组件的状态。

　　已安装(){

　　console.log(这个。$emit(setAge ，1234567))；

　　}

　　此时子组件触发父组件的修改功能，将父组件的年龄修改为1234567。

　　这种情况比较常见，也比较复杂。于是就引出了今天的主角。同步。

　　这个时候，我们可以直接这样写。

　　//父组件将年龄传递给子组件，并使用。同步修改器。

　　MyFooter :age.sync=age

　　/MyFooter

　　//子组件触发事件

　　已安装(){

　　console.log(这个。$emit(update:age ，1234567))；

　　}

　　请注意，我们的活动名称已经更改为update:age。

　　更新：是固定的，即vue约定的名称部分是我们要修改的状态名称，是我们手动配置的，与进来的状态名称相对应。

　　就是这样，是不是感觉轻松多了？

　　注意事项：

　　这里，我们必须在事件执行名前面加上update:来正确触发事件。

.sync修饰符的用法总结

需求描述

　　最近需要在父子组件中实现数据双向传输的功能。

解决方案

　　在vue中，我们知道道具传递的属性只能实现数据的单向流动。如果要实现反向传输的功能，一般是靠这个实现的。$emit()来触发该方法。使用。同步修改器只能通过这个实现。$emit()来触发该属性。

　　//使用传递父组件。同步

　　:page.sync=searchForm.page

　　//子组件由“update:”触发

　　这个。$emit(update:page ，data)

　　注意：在uniapp项目中某些情况下不能正常使用。

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。