微信小程序 | 07.组件间传值

1.概述

• storage类似web应用的localStorage、sessionStorage，都是缓存
• 父传子时，子组件需要定义properties来确定接收的参数名、类型、默认值
• 子传父时，子组件用this.triggerEvent来触发事件，并将参数与事件绑定
• 子传父时，父组件的子组件标签加上bind:事件名="函数名"，事件发生时便触发函数

2.本地缓存storage

web应用有localStorage和sessionStorage的概念，二者都是缓存，数据都与Cookie一样保存在浏览器当中。二者的区别在于：

• localStorage会永久存储，直到手动去删除(removeItem)
• sessionStorage在会话关闭后就会清除

在小程序中可以将数据存到用户的缓存中。微信规定每个小程序的storage上限为10MB，无过期时限，key同名时将覆盖。参考文章微信小程序设置wx.getStorage的有效时间，设置缓存过期时间

基本用法如下：

//Sync代表同步，会阻塞进程，数据更安全
wx.setStorageSync(K, V);
wx.getStorageSync(K);

//没有Sync则代表异步，不阻塞进程更效率
wx.setStorage(K, V);
wx.getStorage(K);

3.父组件(页面)向子组件传值

父传子较为简单。子组件在js的properties中定义属性(名、类型、默认值)，父组件调用子组件时为标签添加属性即可

假定父组件(页面)是"index"，子组件是"eshang-button"

1. 创建组件，编写好wxml和wxss后，在子组件的js文件中，定义properties来确定要接受的参数名、类型和默认值

   

2. 在父组件(页面)的json文件引入，或在app.json全局引入组件

   

3. 在父组件(页面)的wxml中使用组件，在标签中将值传入

   

4. 在子组件中用this.properties.xxx获取父组件传入的值

   

4.子组件向父组件(页面)传值

子传父相对复杂。思路是将需要传递的值与事件绑定起来，事件触发时将该事件向上传递，父组件(页面)接收事件，再从中取值。

假定父组件(页面是index)，子组件是eshang-input输入框，输入框内容一旦改变，就将值传递给父方。

1. 创建并定义组件，在js中添加changeInput函数，输入框内容改变时触发

   

2. 父组件(页面)注册并使用子组件

   

3. 输入框内容改变时输出事件源对象e，发现数据存储于e.detail.value

   

4. 回到子组件的js文件，调用this.triggerEvent函数，将数据与事件绑定。

   

5. 父组件中，先在js中定义名为"efg"的函数，再将"abc"事件与"efg"函数绑定起来：bind:abc="efg"

   

6. 父组件js中的"efg"函数接收事件源对象e，从中找到数据：e.detail

   

输入框内容从子组件"eshang-input"，通过让事件"abc"被父页面"index"监听，并触发在父页面中定义的"abc"事件绑定的"efg"函数，最后在父页面中用e.detail获取到了子组件"eshang-input"的输入框内容