gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

大家根据上传历史进行查找你需要的代码

sync属性修饰符

属性修饰符.sync，可以实现父子数据同步。

以后在elementUI组件中出现，实现父子数据同步。

1.基础结构搭建:

在src/pages/Communication/SyncTest/SyncTest.vue中:

效果:

2.不使用sync修改符

在src/pages/Communication/SyncTest/SyncTest.vue中:

<template>
  <div>
    小明的爸爸现在有{
   
   {money}}元
    <h2>不使用sync修改符</h2>
    <!-- 
      :money 父组件给子组件传递props
      @update:money给子组件绑定的自定义事件,只不过名字叫做update:money
      目前这种操作,其实和v-model很相似,可以实现父子组件数据同步
      money=$event 给monet重新赋值,为子组件传回来的数据
    -->
    <Child :money="money" @update:money="money = $event" />
    <h2>使用sync修改符</h2>
    <hr>
  </div>
</template>

<script type="text/ecmascript-6">
  import Child from './Child.vue'
  import Child2 from './Child2.vue'
  export default {
    name: 'SyncTest',
    data() {
      return {
        money: 10000
      }
    },
    components: {
      Child,
      Child2
    },
  }
</script>

在src/pages/Communication/SyncTest/Child.vue中:

<template>
  <div style="background: #ccc; height: 50px;">
    <span>小明每次花100元</span>
    <!-- $emit触发自定义事件,第一个参数是触发自定义事件的名字,
    第二个参数是子组件需要把父亲还剩多少钱告诉父亲 -->
    <button @click="$emit('update:money',money-100)">花钱</button>
    爸爸还剩{
   
   {money}}元
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'Child',
    props:['money']
  }
</script>

效果: