vue父组件监听子组件数据更新方式(hook)

data(){
    return {
        itemID:'',
    }
}
mounted(){
    // 设置定时器
    this.itemID = setInterval(()=> { console.log('开计时器') }, 1000);
    // 离开页面时清除定时器
    this.$once('hook:beforeDestroy', ()=> { clearInterval(this.itemID) })
}

// 父组件
<template>
    <div class="father">
        <son @hook:update="sonUpdateFun"/>  // 我是子组件
    </div>
</template>

<script>
    import son from './son.vue'
    export default {
        components:{ 'son' },
        methods:{
            sonUpdateFun(){
                console.log("子组件的数据更新啦~~~")
            }
        }
    }
</script>

handleSizeChange
handleSizeChange(index) {
      this.query.length = index
    },

handleCurrentChange
handleCurrentChange(index) {
      console.log(index)
      this.query.start = index
    }

query: {
        start: 1,
        length: 10
      }

watch: {
    query: {
      handler(val, oldVal) {
        this.$emit('changeData', this.query)
      },
      deep: true
    }
  },

<template>
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="query.start"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="query.length"
        layout="sizes, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
</template>

<script>
export default {
  name: 'pagination',
  props: {
    size: {
      type: Number,
      default: function() {
        return 10
      }
    },
    total: {
      type: Number,
      default: function() {
        return 10
      }
    },
    start: {
      type: Number,
      default: function() {
        return 1
      }
    }
  },
  created() {
    this.query = {
      start: this.start,
      length: this.size
    }
  },
  data() {
    return {
      query: {
        start: 1,
        length: 10
      }
    }
  },
  watch: {
    query: {
      handler(val, oldVal) {
        this.$emit('changeData', this.query)
      },
      deep: true
    }
  },
  methods: {
    handleSizeChange(index) {
      this.query.length = index
    },
    handleCurrentChange(index) {
      console.log(index)
      this.query.start = index
    }
  }
}
</script>
<style scoped>
</style>

import pagination from '../../components/table-pagination/pagination'

components: { pagination },

<pagination
          :size="query.length"
          :total="total"
          :start="query.start"
          @changeData="getList($event)"
          />