1. 程式人生 > >vue中.sync修飾符的使用

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>