Vue钩子函数之钩子事件hookEvent,监听组件

在Vue当中，hooks可以作为一种event，在Vue的源码当中，称之为hookEvent。

在Vue组件中，可以用过$on,$once去监听所有的生命周期钩子函数，如监听组件的updated钩子函数可以写成 this.$on('hook:updated', () => {})

示例:使用hook之前

<template><div class="echarts"></div>
</template>
<script>
export default {mounted() {this.chart = echarts.init(this.$el)// 请求数据，赋值数据 等等一系列操作...// 监听窗口发生变化，resize组件window.addEventListener('resize', this.$_handleResizeChart)},updated() {// 干了一堆活},created() {// 干了一堆活},beforeDestroy() {// 组件销毁时，销毁监听事件window.removeEventListener('resize', this.$_handleResizeChart)},methods: {$_handleResizeChart() {this.chart.resize()},// 其他一堆方法}
}
</script>

使用hook之后,监听组件

export default {mounted() {this.chart = echarts.init(this.$el)// 请求数据，赋值数据 等等一系列操作...// 监听窗口发生变化，resize组件window.addEventListener('resize', this.$_handleResizeChart)// 通过hook监听组件销毁钩子函数，并取消监听事件this.$once('hook:beforeDestroy', () => {window.removeEventListener('resize', this.$_handleResizeChart)})},updated() {},created() {},methods: {$_handleResizeChart() {// this.chart.resize()}}
}

监听第三方组件数据的变化，但是组件又没有提供change事件，同事也没办法了，才想出来要去在外部监听组件的updated钩子函数。查看了一番资料，发现Vue支持在外部监听组件的生命周期钩子函数。

<template><!--通过@hook:updated监听组件的updated生命钩子函数--><!--组件的所有生命周期钩子都可以通过@hook:钩子函数名 来监听触发--><custom-select @hook:updated="$_handleSelectUpdated" />
</template>
<script>
import CustomSelect from '../components/custom-select'
export default {components: {CustomSelect},methods: {$_handleSelectUpdated() {console.log('custom-select组件的updated钩子函数被触发')}}
}
</script>

Vue钩子函数之钩子事件hookEvent,监听组件相关推荐

vue组件加载完成之后执行方法_vue-cli监听组件加载完成的方法
在使用vue-cli开发项目时遇到过一个问题,要求是页面组件全部加载完成后再执行某个函数,给上代码参考,方法可能有点笨,好在实现了功能. 1.安装vuex npm install vuex --sav ...
关于TP6的事件，监听，订阅理解
最近关于业务原因.要使用到TP6的事件,之前有个模糊的的概念.今天彻底的去看一下,按照官方文档来说定义事件事件系统使用了观察者模式,提供了解耦应用的更好方式首先的话需要生成一个事件类可以使用官方 ...
jquery对事件的监听方法addEventListener()
在这个点击事件的监听里,我们可以获取鼠标的点击坐标 (function($){window.addEventListener("click",function(evt){for(v ...
html监听页面关闭事件,JS针对浏览器窗口关闭事件的监听方法集锦
本文实例总结了JS针对浏览器窗口关闭事件的监听方法.分享给大家供大家参考,具体如下: 方式一:(适用于IE浏览器,而且刷新不提示,只在点击浏览器关闭按钮的时候提示) window.οnbefοreun ...
前端开发——Vue 监听组件生命周期
监听组件生命周期通常我们使用 $emit 监听组件生命周期,父组件接收事件进行通知. 子组件 export default {mounted() {this.$emit( listenMounted ...
qt Android 按键事件,QT无窗口状态下对键盘事件的监听
Question:最近在搞linux下的一个客户端项目,需要接收键盘事件,但是又不能有界面,这种情况怎么处理呢? int main(int argc, char *argv[]) { QApplica ...
html5中页面关闭事件监听,JS针对浏览器窗口关闭事件的监听方法集锦
本文实例总结了JS针对浏览器窗口关闭事件的监听方法.分享给大家供大家参考,具体如下: 方式一:(适用于IE浏览器,而且刷新不提示,只在点击浏览器关闭按钮的时候提示) window.οnbefοreun ...
SpringBoot---＞＞＞原理解析--＞＞自定义事件监听组件
自定义事件监听组件在上面了解了在程序启动时准备工作和启动过程会扫描 spring.factories 中的配置,拿到要启动的各种配置.这也说明可以自己自定义一些程序启动时会自动扫描的文件,然后在 r ...
深入理解Spring的容器内事件发布监听机制
前言 Spring 提供了 ApplicationContext 事件机制,可以发布和监听事件,这个特性非常有用. Spring 内置了一些事件和监听器,例如在 Spring 容器启动前,Spring ...

Vue钩子函数之钩子事件hookEvent,监听组件

Vue钩子函数之钩子事件hookEvent,监听组件相关推荐

最新文章

热门文章