场景需求:在父组件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>

 

Logo

前往低代码交流专区

更多推荐