Vue中 sync 修饰符介绍

单向数据流

众所周知，Vue 中数据是单向数据流：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更的状态，从而导致你的应用的数据流向难以理解。

使用自定义事件形式，实现子组件更改数据的意图

父组件简要代码：

<!--模板层-->
<template>
    <!--通过v-bind命令传递数据，通过v-on命令监听子组件抛出的自定义事件。-->
    <child :PV="PV" @update:PV="updatePV" />
</template>

// 逻辑层
<script type="text/ecmascript-6">
import Child from './child'

export default {
  name: 'feature',
  components: {
    Child
  },
  data () {
    return {
      PV: 100
    }
  },
  methods: {
    updatePV (NewPV) {
      this.PV = NewPV
    }
  }
}
</script>

子组件简要代码：

<!--模板层-->
<template>
    <el-button @click="update">更新</el-button>
</template>

// 逻辑层
<script type="text/ecmascript-6">
export default {
  name: 'child',
  props: {
    PV: {
      type: Number,
      default: 0
    }
  },
  methods: {
    update () {
      this.$emit('update:PV', this.PV + 100)
    }
  }
}
</script>

父组件通过prop传递数据到子组件，子组件通过抛出自定义事件来传递更改数据的意图，父组件监听事件并作出相应动作，实现双向绑定

使用 sync 修饰符，简化代码

sync修饰符是一个语法糖，在向组件传送数据时可多次使用。作用是实现父子组件数据的双向绑定，简化功能逻辑代码。

在项目中使用sync修饰符两步走：

1、在子组件中接收父组件的数据，并在适时抛出 update:{属性名} 事件 (子组件代码同上)

2、在父组件中使用 sync 修饰符，则实现了双向数据绑定

- <!--sync修饰符实现逻辑-->
- <child :PV="PV" @update:PV="updateF" />
+ <!--语法糖-->
+ <child :PV.sync="PV" />

注意点

1、子组件抛出的自定义事件名称固定为： update:{属性名}

2、vue 的单向数据流性质没有被更改， sync 修饰符只是语法糖而已

官方文档

更多详细用法以及注意事项，请仔细阅读官方文档。

V2官方文档：.sync 修饰符

话说：不看Vue官方文档的工程师，不是好厨子