文章目录

  • 1.概述
  • 2.本地缓存storage
  • 3.父组件(页面)向子组件传值
  • 4.子组件向父组件(页面)传值


1.概述

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

2.本地缓存storage

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

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

在小程序中可以将数据存到用户的缓存中。微信规定每个小程序的storage上限为10MB，无过期时限，key同名时将覆盖。

基本用法如下：

//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. 父组件(页面)注册并使用子组件

微信小程序的前端怎么查看请求头的session值 微信小程序sessionstorage_数据

  1. 输入框内容改变时输出事件源对象e，发现数据存储于e.detail.value
  2. 回到子组件的js文件，调用this.triggerEvent函数，将数据与事件绑定。
  3. 父组件中，先在js中定义名为"efg"的函数，再将"abc"事件与"efg"函数绑定起来：bind:abc="efg"
  4. 父组件js中的"efg"函数接收事件源对象e，从中找到数据：e.detail

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