VUE hookEvent监听组件生命周期

最新推荐文章于 2023-09-08 17:55:04 发布

CodeYu_

最新推荐文章于 2023-09-08 17:55:04 发布

阅读量202

点赞数 2

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/Aiolimp/article/details/114024473

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了在Vue组件中如何使用$on、$once等方法监听生命周期钩子，例如在mounted和beforeDestroy钩子中分别初始化图表和移除窗口大小变更事件监听。同时展示了如何通过@hook语法在父组件中监听子组件的updated钩子，实现组件间的交互。这种方法对于组件状态管理和性能优化至关重要。

摘要由CSDN通过智能技术生成

hookEvent监听组件生命周期

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

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()
    }
  }
}

2. 外部监听生命周期函数

<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>