vue中.sync修饰符的使用

场景需求：在父组件data里定义一个变量page，我们希望在子组件里改变这个变量并传给父组件。

在父组件里：

  <template>
    <v-pagination :page.sync="page></v-pagination>
  </template>
  <script type="text/ecmascript-6">
    export default {
      data() {
        return {
          page: 1
        }
      }
    }  
  </script>

在子组件里：

<template>
  <div class="pagination">
    <el-pagination
      background
      :pager-count="11"
      layout="prev, pager, next"
      @current-change="currentChange"
      :total="totalNum">
    </el-pagination>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    methods: {
      currentChange(page) {
        this.$emit('update:page', page)
      }
    }
  }
</script>