小程序----第四天-CSDN博客

本文链接：https://blog.csdn.net/weixin_63471708/article/details/124285084

本文详细介绍了微信小程序中父子组件间的通信方法，包括通过properties和setData，以及通过自定义事件和全局数据共享。展示了如何在父子组件间传递数据，以及如何利用事件机制进行交互，并探讨了如何实现跨页面的数据共享策略。

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

微信小程序父子通信
方法一

// 子组件中定义 properties
properties:{
// 属性名:类型
age: Number
}

{{ 属性名 }}
{{ age }}

<子组件属性名="{{ 变量 }}"></子组件>
<子组件 age="{{ 18 }}"></子组件>
方法二

通过 selectComponent 获取子组件实例，调用方法修改

<子组件 id="id值"></子组件>
this.selectComponent('#id值').setData({
key:val
})
微信小程序子父通信
子组件通过 triggerEvent 触发自定义事件

// this.triggerEvent('自定义事件名',数据)

Component({
data:{
age:10
},
methods:{
this.triggerEvent('event',this.data.age)
}
})
父组件给自定义事件绑定事件函数

<子组件 bind:自定义事件名="事件函数"></子组件>
<子组件 bind:event="getAge"></子组件>
父组件定义事件函数

Page({
getAge(e){
// e.detail 就是子组件传来的值
console.log(e.detail)
}
})
微信小程序实现全局数据共享
在 app.js 里设置一些公共数据

// 配合本地存储实现持久化
const val = wx.getStorageSync('key')
App({
globalData:{ key:val } // 存储共享的数据
})
在页面的 .js 文件中调用

// 通过 getApp 可以获取到应用实例对象
const app = getApp()
Page({
data:{
key: app.globalData.key
},
fn(){
// 存储数据到本地存储
wx.setStorageSync('key',数据)
// 赋值应用实例里的属性
app.globalData.key = 数据
// 设置给页面
this.setData({
key: 数据
})
}
})