美文网首页
uniapp 子组件监听页面onShow

uniapp 子组件监听页面onShow

作者: 我是七月 | 来源:发表于2024-03-11 09:20 被阅读0次
uniapp 开发的时候,需要子组件监听onShow事件,但是子组件没有办法直接监听onShow,我们可以通过页面监听,当页面监听到以后发送通知,子组件监听通知,收到通知后触发事件就可以了。

页面代码

onShow() {
    uni.$emit('onShow', 1);
},
//触底监听
onReachBottom() {
    uni.$emit('onReachBottom', 1);
},

子组件监听

mounted() {
    uni.$on('onShow', function(data) {
        console.log(data);
    });
    
    uni.$on('onReachBottom', function(data) {
        console.log(data);
    });
}

销毁

为了避免重复监听,在组件销毁前,关闭监听

beforeDestroy(){
    uni.$off('onReachBottom')
    uni.$off('onShow')
},

相关文章

  • 生命周期函数

    onLoad 监听页面加载 onReady 监听页面初次渲染完成 onShow 监听页面显示 onHide 监听页...

  • uni-app页面生命周期

    onLoad监听页面加载onShow监听页面显示onReady监听页面初次渲染完成 onHide监听页面卸载onU...

  • 小程序页面的生命周期07

    onLoad 生命周期函数--监听页面加载 发送异步请求,初始化页面数据 onShow 生命周期函数--监听页面显...

  • Vue.js组件传值

    子组件向父组件传值 在子组件页面触发事件$emit 在父组件中在组件标签中调用v-on事件监听 父组件向子组件传值...

  • vue子组件监听滚动

    背景 页面结构是一个父组件嵌套一个子组件,我在子组件中监听页面滚动,使用 发现scrollPage一直没有触发,后...

  • 小程序 监听 data 数据

    小程序 监听 data 数据 组件中监听 普通页面中监听

  • uniapp 生命周期

    应用生命周期(仅可在App.vue中监听,页面监听无效) 参考官网:https://uniapp.dcloud.i...

  • 小程序事件

    onLoad,onShow,onReady,先后执行wx.navigateTo({}),打开子页面wx.redir...

  • vue watch deep无效解决

    最近写项目,子组件通过props接收父组件的数据,在子组件中使用watch监听 deep深度监听对象 当监听的是对...

  • Vue开发中的常用技巧

    1. 监听子组件的生命周期 例如有父组件Parent和子组件Child,如果父组件监听到子组件挂载mounted就...

网友评论

      本文标题:uniapp 子组件监听页面onShow

      本文链接:https://www.haomeiwen.com/subject/pglmzdtx.html