属性修饰符sync（同步） 实现父子数据同步

实现父子组件数据同步

1.-----不使用sync------，与v-model很相似，利用props和绑定自定义事件实现

父组件：给子组件props，更改子组件传回给父组件的数值

<template>
  <div>    
    <h2>爸爸一共有{{num}}元</h2>
    <h3>-----不使用sync------</h3>
    <!-- 与v-model很相似，使用props和自定义事件让父子数据同步 
          :num是传给子组件的props
          @money是给子组件绑定的自定义事件  -->
    <child :num="num" @money="num=$event"/>
  </div>
</template>
<script>
import child from './child.vue'
export default {
  components:{child},
  data() {
    return {
      num:10000
    }
  },
}
</script>

子组件：将结果触发传给父组件

<template>
  <div>
    <span>每次给小明100元</span>
    <button @click="$emit('money',num-100)">给小明</button>
    <span>爸爸还剩{{num}}元</span>  
  </div>
</template>

<script>
export default {
  props:['num'],
}
</script>

2.-----使用sync------

:num.sync 作用

第一：传给子组件props是num  

第二：给子组件绑定的自定义事件名称为update:num(注意：update是固定的)

父组件：

<template>
  <div>
    <h2>爸爸一共有{{num}}元</h2>
    <!-- :num.sync 作用 第一：传给子组件props是num  第二：给子组件绑定的自定义事件名称为                        
          update:num(update是固定的) -->
    <h3>-----使用sync------</h3>
    <child1 :num.sync="num"/>
  </div>
</template>

<script>
import child1 from './child1.vue'
export default {
  components:{child1},
  data() {
    return {
      num:10000
    }
  },
}
</script>

子组件：update一定要有

<template>
  <div>
    <span>每次给小明100元</span>
    <button @click="$emit('update:num',num-100)">给小明</button>
    <span>爸爸还剩{{num}}元</span>
  </div>
</template>

<script>
export default {
  props:['num'],
}
</script>

实现结果