uniapp 微信小程序 子组件触发onShow

uniapp yekong

在 UniApp 微信小程序中,onShow 生命周期方法是用于监听页面显示时触发的。如果你想在子组件中监听这个事件,可以使用 UniApp 的页面生命周期钩子 $vm。具体操作如下:

  1. 在父组件的 onShow 方法中,将事件传递给子组件。
    首先,在父组件的 onShow 方法中,通过子组件的引用,调用子组件的自定义方法(如 childOnShow):
// 父组件
export default {
    onShow() {
        this.$refs.childComponent.childOnShow();
    }
}
  1. 在子组件中定义 childOnShow 方法。
    然后,在子组件中定义一个 childOnShow 方法,当父组件触发 onShow 时,这个方法将被调用:
// 子组件
export default {
    methods: {
        childOnShow() {
            console.log('子组件 onShow');
            // 在这里执行你需要的操作
        }
    }
}
  1. 在父组件的模板中正确引用子组件。
    确保在父组件的模板中正确引用了子组件,并为子组件添加 ref 属性:
<template>
    <view>
        <child-component ref="childComponent"></child-component>
    </view>
</template>

通过以上步骤,当父组件触发 onShow 事件时,子组件的 childOnShow 方法将被调用,从而实现在子组件中监听 onShow 事件的目的。

喜欢