微信小程序组件 component 中自执行一个函数的处理

最新推荐文章于 2025-06-04 13:00:22 发布

原创最新推荐文章于 2025-06-04 13:00:22 发布 · 8.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #组件函数执行 #请求 #在组件中 #执行

微信小程序，百度小程序专栏收录该内容

15 篇文章

订阅专栏

本文介绍在微信小程序中如何实现在组件加载时获取数据并完成渲染。主要探讨了两种方法：一是利用组件的生命周期函数 attached()；二是通过 properties 中 data 的 observer 函数触发请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

情景描述：

开发了一个微信小程序的页面 A ，然后在页面A 中引入一个组件 B,

现在想在组件 B 加载进来的时候执行一个请求，获取数据进行B组件的渲染；

如何去写这个请求？

解决方案1：使用组件的生命周期

你可能指导小程序的生命周期，但是组件自己也是有生命周期函数的，

上面的请求我们可以写在组件的生命周期函数 attached()中；

解决方案2：使用参数传递触发函数请求

通过 properties 中的 data 中的 observer函数来触发我们的请求数据的处理；

示例（B组件）：

Component({
    properties: {
        data: {
            type: Object,
            value: {},
            observer(newVal, oldVal) {
                // 第一种方式通过参数传递的方式触发函数的执行
                this.logInfo();
            }
        }
    },

    data:{

    },

    methods: {
        logInfo(){
            console.log("发起请求获取数据");
        }
    },

    attached(){
        // 第二种方式通过组件的生命周期函数执行代码
        console.log("发起请求获取数据");
    }
})

如果通过 observer 函数进行触发；

那么在A页面中引入组件的时候需要加 data 处理，加data就是为了触发observer 函数从而执行我们的函数请求处理：