vue父組件監聽子組件數據更新方式(hook)

Posted on 2022-08-01 by WalkonNet

vue父組件監聽子組件數據更新

this.$on(‘hook : 生命周期鉤子’, () => {})

可以監聽執行生命周期鉤子，適用場合如：

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

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

定時器裡放需要定時請求的數據，然後離開頁面就清除定時器，也就停止請求

@hook:生命周期鉤子=“觸發的函數”

父組件監聽子組件數據更新，也就是監聽生命周期 ~

來人！上代碼！

// 父組件
<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>

當子組件的數據更新的時候就會觸發函數 sonUpdateFun，就可以進行一些不可描述的操作瞭

監聽子組件內數據變化,父組件綁定change事件

如題，做瞭一個分頁功能，element裡面的分頁，已經有瞭頁碼改變、每頁數量改變的change事件，這樣如果當頁碼改變、每頁數量改變的時候，又要在methods裡面寫change來根據改變的值來獲取分頁，這樣就很麻煩，如果沒個頁面都有分頁，這樣就要在methods裡面多寫change事件。

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

子組件

1.這個綁定瞭每頁數量改變的事件，

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

2.這個綁定瞭當前頁碼改變的事件

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

3.最重要的數據，這裡是當前頁碼和每頁數量，

query: {
        start: 1,
        length: 10
      }

4.頁碼跟數量改變是在子組件中完成的，寫個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.先引入組件，組件位置根據自己的而定

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

2.然後註冊組件

components: { pagination },

3.使用組件

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

組件傳遞的參數：

4.如何獲取子組件傳遞過來的query對象？

1）父組件獲取

註意：

這裡的changeData跟子組件中$emit發送的地方要相同！

2）子組件部位

註意：this.$emit('changeData',this.query)

changeData就是父組件中子組件部位註冊的自定義事件，this.query就是要傳遞的值

3）我的獲取分頁的函數就是getList（query），直接在自定義事件中寫@changeData="getList($event)"

大功告成

這樣每當子組件中query的值改變之後，父組件都會執行分頁查詢請求，就可以實時更新瞭！

後記：自定義事件，可以做很多事情，比如，點擊子組件按鈕，傳遞參數，然後父組件使用這個參數來做什麼事情，當整個頁面的數據量、邏輯實在是太龐大的時候，就可以把整個也面分成一個個小組件來，這樣就不會顯得頁面龐大復雜瞭…

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

vue父組件監聽子組件數據更新方式(hook)

目錄