首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue父组件监听子组件数据更新

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

2022-08-01 08:34:17 作者：Mao_mou

这篇文章主要介绍了vue父组件监听子组件数据更新方式(hook)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

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)"
          />

组件传递的参数：