uni-app 子组件生命周期事件不正常触发

uni-app 子组件生命周期事件不正常触发

开发环境 版本号 项目创建方式
Windows 11 HBuilderX

产品分类：uniapp/H5

浏览器平台：Chrome
浏览器版本：123.0.6312.123

操作步骤：

测试步骤(每次页面后建议回到首页刷新再开始)： 请按键按钮编号依次点击(数字为按钮编号) 注意观察点击3按钮时，会不会触发事件。 1->2->4->3 = 不会触发事件 1->2->5->3 = 不会触发事件 1->2->6->3 = 会触发事件(但是这个是会先卸载组件再创建一次组件，所以这个也不是很好。) 1->3 = 正常触发事件(但是这个是没有跳转到普通页面。这样也不行。)


预期结果：

能正常触发事件

实际结果：

不会正常触发事件


bug描述：

应该是全端都有问题。主要是组件的事件触发问题。具体请看测试DEMO。这个问题比较难以讲明白。所以直接运行DEMO就明白了。

更多关于uni-app 子组件生命周期事件不正常触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html

14 回复

所以你的问题是 1->2->4->3和1->2->5->3的时候主页的子组件并没有触发销毁相关的生命周期 对吧？ 页面关闭时 主动销毁子组件 你试试下面的方式 是不是你想要的效果

更多关于uni-app 子组件生命周期事件不正常触发的实战教程也可以访问 https://www.itying.com/category-93-b0.html


感谢提供思路。这也是一个解决方案。不过最好是能自动触发事件。目前暂时选这样处理吧。

组件又没有显示和隐藏事件，只要最开始加载的事件，可以父级子级创建一个显示和隐藏方法，然后父级显示隐藏切换不同组件使用ref调用子组件的方法

兄弟，你可能没看明白，@爱豆豆 的图片是一个PAGE页，这个页面是有页面事件的。而且你说的是啥意思，我也没太明白。我的问题是组件的事件触发有问题。而不是页面事件有问题。因为我的子组件中有大量的销毁事件，也就是说，在这个PAGE中，调用了很多子组子，而有些子组件需要在销毁时作一些处理。而我遇到的是没有触发这些销毁事件。明白了吗

回复 爱豆豆: 应该不行，一定要是销毁事件才可以，因为子组件中，还有其它更多子组件，都是监听的销毁事件，不可能每一个都去这样调用，太不合理，也太麻烦，而且正常情况下，这样处理，就会多次执行销毁的动作。

回复 阿全uniapp: 还是用if吧 最简单

我之前想的也是最后实再没办法才像你说的这样去做，但是你上面那个方案就很好，我只需要在PAGE中，稍微改一点就实现了。

回复 阿全uniapp: 对的 通过ref控制的话 也能实现 但是不太适合你需求了

回复 爱豆豆: 嗯。是的。因为我的子组子还有很多，有些还是renderjs组件。这个页面比较复杂。renderjs层也有这个事件的监听。而且还是公用组件。所以，没办法一个一个的去处理。太麻烦。这本身应该算是一个BUG。而且正常情况是可以销毁的。

回复 阿全uniapp: 组件销毁使用destroyed事件反正组件data同级

组件 mounted(){ this.$root.$on(‘hook:onShow’, this.handleShow); this.$once(‘hook:beforeDestroy’, () => { this.$root.$off(‘hook:onShow’, this.handleShow); }); this.handleShow换成要执行的代码逻辑试试 }

首先感谢回答，你这个方法应该行不通beforeDestroy事件你是在哪里调用的？我是要在组件中调用。而不是PAGE上。但问题是组件中不会触发这个事件。

我使用爱豆豆提供的方案解决的，直接在卸载页面时，将子组件使用v-if控制，这样就触发了。

在使用 uni-app 开发时，子组件的生命周期事件可能会因为某些原因无法正常触发。以下是一些常见的原因及解决方法：

1. 组件未正确引入或注册

  • 问题：子组件未在父组件中正确引入或注册，导致子组件的生命周期事件无法触发。

  • 解决方法：确保在父组件中正确引入并注册子组件。

    // 父组件中引入子组件
import ChildComponent from '@/components/ChildComponent.vue';

export default {
  components: {
    ChildComponent
  }
}

2. v-if 或 v-show 影响

  • 问题：子组件被 v-if 或 v-show 控制显示/隐藏时，可能会导致生命周期事件无法按预期触发。

  • 解决方法：检查父组件中是否有 v-if 或 v-show 控制子组件，并根据需要调整逻辑。

    <!-- 父组件中使用子组件 -->
<ChildComponent v-if="isVisible" />

    如果 isVisible 初始为 false，子组件的生命周期事件可能不会触发。可以考虑在 isVisible 变为 true 时再渲染子组件。

3. 组件未正确挂载

  • 问题：子组件可能未正确挂载到 DOM 中，导致生命周期事件无法触发。

  • 解决方法：检查子组件的挂载逻辑，确保在父组件中正确使用子组件。

    <!-- 父组件中使用子组件 -->
<template>
  <ChildComponent />
</template>

4. 异步加载组件

  • 问题：如果子组件是异步加载的，可能会影响生命周期事件的触发。

  • 解决方法：确保异步加载组件的逻辑正确，并在组件加载完成后进行必要的处理。

    // 父组件中异步加载子组件
export default {
  components: {
    ChildComponent: () => import('@/components/ChildComponent.vue')
  }
}

5. 生命周期钩子未定义

  • 问题：子组件中未定义生命周期钩子函数，导致事件无法触发。

  • 解决方法：确保在子组件中正确定义生命周期钩子函数。

    // 子组件中定义生命周期钩子
export default {
  created() {
    console.log('子组件 created');
  },
  mounted() {
    console.log('子组件 mounted');
  }
}

6. 组件嵌套问题

  • 问题：子组件可能嵌套在其他组件中，导致生命周期事件无法正常触发。
  • 解决方法：检查组件嵌套关系，确保子组件的生命周期事件不会被其他组件影响。

7. uni-app 版本问题

  • 问题：uni-app 的某些版本可能存在生命周期事件的触发问题。
  • 解决方法：确保使用最新版本的 uni-app，或查阅官方文档和社区，查看是否有已知问题及解决方案。

8. 调试工具使用

  • 问题：在调试过程中，可能无法准确观察到生命周期事件的触发。
  • 解决方法：使用 console.log 或 uni-app 提供的调试工具，逐步排查生命周期事件的触发情况。

9. 事件监听问题

  • 问题：如果子组件的生命周期事件是通过事件监听触发的，可能事件未正确绑定。

  • 解决方法：确保事件监听器正确绑定，并在合适的地方触发事件。

    // 子组件中触发事件
this.$emit('custom-event');

    <!-- 父组件中监听事件 -->
<ChildComponent @custom-event="handleCustomEvent" />
回到顶部