Vue 单向数据流之.sync 修饰符

父组件：(注意value的值）

<template>
    <div>
        <son :value.sync="value"></son>
    </div>
</template>
    
<script>
    import son from './index.vue'  // 子组件路径
    export default {
      name:'father',
      components:{
        son
      },
    data(){
      return {
         value: 1
      }
    },
    mounted(){
       console.log(this.value)  // 2
    }
}
</script>

<style>

</style>

  子组件：

<script>
  export default {
      name:'son',
      props:{
          value:{
              type:Number
          }
      },
      created(){
          this.value += 1
      }
   }
</script>

<style>

</style>

  相信这里仔细看的同学已经看到了，父组件的传值被直接修改了，Vue单向数据流不允许子组件直接修改父组件的传值，因为子组件都去修改父组件的值的话到时候项目数据出问题了，项目小还能找一下，项目大、父子之间传值比较复杂的话哭都没地方哭，就只能提桶跑路了。所以别看本章节知识点小，但指不定什么时候就可能有大作用，这里利用Vue自带的sync 修饰符传值，子组件就可以直接修改父组件的传值了，同时这里不违反Vue单向数据量的规则。如果想要在子组件修改父组件的值就快快拿去试一试吧！

我是前端小小，山水有相逢，咱们下期再见。