.sync和自定义事件的简单对比使用

以下是目录结构

1. 自定义事件

father.vue

<template>
  <div>
    <child :num="numParent" @setNum="(res) => numParent = res" />
  </div>
</template>

<script>
import child from "./child.vue"
export default {
components:{child},
data(){
    return{
     numParent:'222'
    }
}
}
</script>

<style>

</style>

child.vue

<template>
  <div class="child">
    父组件传过来的值：  {{num}}
   <el-button type='primary' @click="changNum">点击更改</el-button>
  </div>
</template>

<script>
export default {
data(){
    return{
      
    }
},
props:["num"],

methods:{
    changNum(){
      this.$emit("setNum","新的值")
    }
}
}
</script>

<style>

</style>

2. .sync

father.vue

<template>
  <div>
    <child :num.sync="numParent" />
  </div>
</template>

<script>
import child from "./child.vue"
export default {
components:{child},
data(){
    return{
     numParent:'222'
    }
}
}
</script>

<style>

</style>

child.vue

<template>
  <div class="child">
    父组件传过来的值：  {{num}}
   <el-button type='primary' @click="changNum">点击更改</el-button>
  </div>
</template>

<script>
export default {
data(){
    return{
      
    }
},
props:["num"],

methods:{
    changNum(){
      this.$emit("update:num","新的值")
    }
}
}
</script>

<style>

</style>