Vue父子组件传值.sync

传统的父子组件之间传值，父组件通过 :变量=“xxx”将值传给子组件，子组件通过props进行接收。但是子组件只有读的属性,不可以对数据进行更改,所以$emit传回父组件，由父组件对数据进行修改

//父组件
<template>
  <div class="content">
     <btn :btnName='num' @changeFn= changeFn></btn>
  </div>
</template>

子组件
export default {
  name: 'btn',
  props: {
    btnName:{
        type : [String,Number],
        required: true
    }
  },
  methods: {
      changeNum(){
          this.$emit('changeFn',888)
      }
  },
}

.sync 相当于上面的父子组件传值简写 父子双向传值语法糖
父组件在传入子组件的数据后加上.sync 不需要在对子组件的$emit进行接收

<template>
  <div class="content">
     <btn :btnName.sync='num' ></btn>
  </div>
</template>

子组件$emit传回的不再是函数 而是 update:父组件传过来的变量名称

<script>
export default {
  name: 'btn',
  props: {
    btnName:{
        type : [String,Number],
        required: true
    }
  },
  methods: {
      changeNum(){
          this.$emit('update:btnName',888)
      }
  },
}
</script>

总的来说，.sync 使得父组件少走了处理 $emit的那一步