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

vue父组件监听子组件数据更新

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

可以监听执行生命周期钩子，适用场合如：

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

将定时器和清除定时器放在一起，功能和写在beforeDestroy生命周期中是一样滴，这样维护起来比较方便 ~

定时器里放需要定时请求的数据，然后离开页面就清除定时器，也就停止请求

@hook:生命周期钩子=“触发的函数”

父组件监听子组件数据更新，也就是监听生命周期 ~

来人！ 上代码 ！

// 父组件 

当子组件的数据更新的时候就会触发函数 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.完整子组件代码

父组件

1.先引入组件，组件位置根据自己的而定

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

2.然后注册组件

components: { pagination },

3.使用组件

组件传递的参数：

4.如何获取子组件传递过来的query对象？

1）父组件获取

注意：

这里的changeData跟子组件中$emit发送的地方要相同！

2）子组件部位

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

changeData就是父组件中子组件部位注册的自定义事件，this.query就是要传递的值

3）我的获取分页的函数就是getList（query），直接在自定义事件中写@changeData="getList($event)"

大功告成

这样每当子组件中query的值改变之后，父组件都会执行分页查询请求，就可以实时更新了！

后记：自定义事件，可以做很多事情，比如，点击子组件按钮，传递参数，然后父组件使用这个参数来做什么事情，当整个页面的数据量、逻辑实在是太庞大的时候，就可以把整个也面分成一个个小组件来，这样就不会显得页面庞大复杂了…

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！