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项目中的某些情况下不能正常使用。 

以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。