Vue2.0 与 Vue3.0 中实现父子组建数据同步的方式 sync 与 v-model

父子组建通信 通过一个很经典的实例演示Vue 2.0 与 3.0 中的区别

Vue3.0 的实现方式

    * 原始实现
    // 1. 在父组件中定义 
    // 创建一个子组件testSubView
    import testSubVue from './testSub.vue';
        components:{
            testSubVue
        },
        const data = reactive({
              money:10000
        })
    
        return {
             ...toRefs(data)
        }
    
    //父组件模板中的代码
     <span>小明的爸爸现在有{{money}}钱</span>
     <testSubVue :money="money" @update:money = "money=$event"></testSubVue>

2. 在子组件中

    <button @click="costMoney">花钱</button>
    <span>小明的爸爸还剩下{{am}}元</span>

    // Vue3.0 中通过emit使父组件响应方法的实现方式与vue 不同
     props:["money"],
     emits:['update:money'],
     setup(props,ctx) {
         const am = computed(()=> {
            return props.money
        })
        const costMoney =()=> {
            console.log('子组件花钱了..........')
            ctx.emit('update:money',props.money - 100)
        }
        return {
            am,
            costMoney
         }   
     }

• 原始实现的方式稍微复杂 使用v-model 可以简写成这样

// 在父组件中  vue 2.0 中使用的是sync 修饰符 vue 3.0 中统一改成了v-model
    <testSubVue v-model:money="money"></testSubVue>
// 子组件的写法跟上面一样

下面记录下在 Vue 2.0 时候父子组建数据同步的实现过程

// 1. 在父组件中定义 
    // 创建一个子组件testSubView
    import testSubVue from './testSub.vue';
       components:{
           testSubVue
       },
      data() {
        return {
          money:10000
        }
      },
  
  // 父组件组建模板中的代码
  <span>小明的爸爸有{{money}}元</span>
  <testView :money = "money" @update:money="money=$event"></testView>
  
2. 子组件中的实现 
   props:["money"],
    methods: {
        costAction() {
            console.log('点击花钱的事件........')
            this.$emit("update:money",this.money - 100)
        }
    }
    
// 子组件模板中代码
     <span>小明每次花100元</span>
     <button @click="costAction">花钱</button>
     <br>
     <span>爸爸还剩下{{money}}元</span>

• Vue2.0 中使用sync 修饰符实现的方法

// 修改父组件中的代码  其它代码不变
    <testView :money.sync="money"></testView>
// 子组件中的代码不变

• 前端新手如果笔记中存在任何问题或者还有更好的实现方式还望过路大神不吝赐教！