Passing value of parent-child component in Vue.sync

vue parent-child component passes value.sync

Traditional parent-child components pass values

The parent component passes the value to the child component through : variable = "xxx"

Subcomponents are received through props

However, the child component only has read attributes and cannot change the data, so $emit is passed back to the parent component and the parent component changes the data

// Parent component<template>
  <div class="content">
     <btn :btnName='num' @changeFn= changeFn></btn>
  </div>
</template>

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

.sync is equivalent to the abbreviation of parent-child component passing values ​​above

Two-way value transmission of father and son syntax sugar

The parent component adds .sync after passing the data into the child component. It does not need to receive the $emit of the child component.

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

The child component $emit is no longer a function, but update: the variable name passed from the parent component

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

Overall

.sync makes the parent component less likely to process $emit

OK, the above is personal experience. I hope you can give you a reference and I hope you can support me more.