data(){
?? ?return {
?? ??? ?itemID:'',
?? ?}
}
mounted(){
?? ?// 設(shè)置定時器
?? ?this.itemID = setInterval(()=> { console.log('開計時器') }, 1000);
?? ?// 離開頁面時清除定時器
?? ?this.$once('hook:beforeDestroy', ()=> { clearInterval(this.itemID) })
}

將定時器和清除定時器放在一起，功能和寫在beforeDestroy生命周期中是一樣滴，這樣維護起來比較方便 ~

定時器里放需要定時請求的數(shù)據(jù)，然后離開頁面就清除定時器，也就停止請求

@hook:生命周期鉤子=“觸發(fā)的函數(shù)”

父組件監(jiān)聽子組件數(shù)據(jù)更新，也就是監(jiān)聽生命周期 ~

來人！上代碼！

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

<script>
?? ?import son from './son.vue'
?? ?export default {
?? ??? ?components:{ 'son' },
?? ??? ?methods:{
?? ??? ??? ?sonUpdateFun(){
?? ??? ??? ??? ?console.log("子組件的數(shù)據(jù)更新啦~~~")
?? ??? ??? ?}
?? ??? ?}
?? ?}
</script>

當(dāng)子組件的數(shù)據(jù)更新的時候就會觸發(fā)函數(shù) sonUpdateFun，就可以進行一些不可描述的操作了

監(jiān)聽子組件內(nèi)數(shù)據(jù)變化,父組件綁定change事件

如題，做了一個分頁功能，element里面的分頁，已經(jīng)有了頁碼改變、每頁數(shù)量改變的change事件，這樣如果當(dāng)頁碼改變、每頁數(shù)量改變的時候，又要在methods里面寫change來根據(jù)改變的值來獲取分頁，這樣就很麻煩，如果沒個頁面都有分頁，這樣就要在methods里面多寫change事件。

想到了一個解決方法，就是把element的分頁封裝成一個組件，具體思路如下：

子組件

1.這個綁定了每頁數(shù)量改變的事件，

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

2.這個綁定了當(dāng)前頁碼改變的事件

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

3.最重要的數(shù)據(jù)，這里是當(dāng)前頁碼和每頁數(shù)量，

query: {
        start: 1,
        length: 10
      }

4.頁碼跟數(shù)量改變是在子組件中完成的，寫個watch，然后實時把query傳遞給父組件

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

5.完整子組件代碼

<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>

父組件

1.先引入組件，組件位置根據(jù)自己的而定

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

2.然后注冊組件

components: { pagination },

3.使用組件

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

組件傳遞的參數(shù)：