vue .sync修饰符

父传子的数据的时候 子直接修改父传的数据会报错 可以使用.sync修饰符 子传父的时候 父组件可以少写一个方法 

父组件 
<!-- <demo :money="money" @update:money="f1"></demo> -->

    <demo :money.sync="money" :visible.sync="visible"></demo>


<script>
data() {
    return {
      visible: false,
      money: 100,
    }

  },

  f1(e) {
      this.money = e
    },
</script>



子组件
<template>
  <div>
    dome 父传来的数据{{money}}<button @click="handel">money</button>
  </div>
</template>

<script>
export default {
  name: 'Demo',

  props: ['money'],
  methods: {
    handel() {
      //  this.money = 200   //直接修改报错
      this.$emit('update:money', 200)
      this.$emit('update:visible', 11111)
    },
  },
}
</script>

打个比方，如下代码需要两部才能实现上述功能：1.向子组件传值；2.接收子组件回调的值

//父组件传值 
<demo :visible="visible" :money="money" @update:aa="fn1"></demo>
//子组件回调
  methods: {
    fn () {
     this.$emit('update:aa', 200)
    }
  }

使用sync语法糖后，父组件不需要单独声明一个方法，只需要在回调时声明一个update绑定的回调函数（这个绑定值是传值自身）

这样在父组件中就不需要再次定义回调函数进行接收了。

//父组件中的使用sync语法糖，传递和接收参数
 
  <demo :visible.sync="visible" :money.sync="money"></demo>
//子组件中使用update绑定参数的方法进行回调
  methods: {
    fn () {
      this.$emit('update:money', 200)
      this.$emit('update:visible', true)
    }
  }

//父组件中的使用sync语法糖，传递和接收参数
 
  <demo :visible.sync="visible" :money.sync="money"></demo>
//子组件中使用update绑定参数的方法进行回调
  methods: {
    fn () {
      this.$emit('update:money', 200)
      this.$emit('update:visible', true)
    }
  }