快捷導(dǎo)航

vue父組件監(jiān)聽(tīng)子組件數(shù)據(jù)更新方式(hook)

更新時(shí)間：2022年08月01日 08:44:58 作者：Mao_mou

這篇文章主要介紹了vue父組件監(jiān)聽(tīng)子組件數(shù)據(jù)更新方式(hook)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue父組件監(jiān)聽(tīng)子組件數(shù)據(jù)更新

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

可以監(jiān)聽(tīng)執(zhí)行生命周期鉤子，適用場(chǎng)合如：

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

將定時(shí)器和清除定時(shí)器放在一起，功能和寫(xiě)在beforeDestroy生命周期中是一樣滴，這樣維護(hù)起來(lái)比較方便 ~

定時(shí)器里放需要定時(shí)請(qǐng)求的數(shù)據(jù)，然后離開(kāi)頁(yè)面就清除定時(shí)器，也就停止請(qǐng)求

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

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

來(lái)人！上代碼！

// 父組件
<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ù)更新的時(shí)候就會(huì)觸發(fā)函數(shù) sonUpdateFun，就可以進(jìn)行一些不可描述的操作了

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

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

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

子組件

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

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

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

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

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

query: {
        start: 1,
        length: 10
      }

4.頁(yè)碼跟數(shù)量改變是在子組件中完成的，寫(xiě)個(gè)watch，然后實(shí)時(shí)把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.然后注冊(cè)組件

components: { pagination },

3.使用組件

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

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

4.如何獲取子組件傳遞過(guò)來(lái)的query對(duì)象？

1）父組件獲取

注意：

這里的changeData跟子組件中$emit發(fā)送的地方要相同！

2）子組件部位

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

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

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

大功告成

這樣每當(dāng)子組件中query的值改變之后，父組件都會(huì)執(zhí)行分頁(yè)查詢請(qǐng)求，就可以實(shí)時(shí)更新了！

后記：自定義事件，可以做很多事情，比如，點(diǎn)擊子組件按鈕，傳遞參數(shù)，然后父組件使用這個(gè)參數(shù)來(lái)做什么事情，當(dāng)整個(gè)頁(yè)面的數(shù)據(jù)量、邏輯實(shí)在是太龐大的時(shí)候，就可以把整個(gè)也面分成一個(gè)個(gè)小組件來(lái)，這樣就不會(huì)顯得頁(yè)面龐大復(fù)雜了…

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: