1. 使用全局变量实现数据传递
2. 页面跳转或重定向时，使用url带参数传递数据
3. 使用组件模板 template传递参数
4. 使用缓存传递参数
5. 使用数据库传递数据

1. 全局APP

app.js和app.wxss中的代码都是全局生效的，所以我们可以利用这一点儿，在不同页面之间进行传值。

//往globalData设置值getApp().globalData.data = "12345";//取globaData的值var data = app.globalData.data;App({
  globalData: {
    data:XXX
  }})1234567891011

GlobalData可以随时在页面中读取和存储数据，比Storage方便很多。
但是，在其他页面读取以及修改globalData。不论是读取还是修改，首先需要在应用的页面js文件中，引用app()实例，所以在js文件中，第一句要写上这句：

var app = getApp();1

2. URL传值

这种方式最常用，比如:

wx.navigateTo({
  url: '../detail/detail?cid='+cid+'&token='+token})1234

这里面直接通过跳转页面的URL进行传值，然后在另一个页面进行接收：

onLoad: function (opt) {
  console.log('cid =' + opt.cid);
  console.log('access_token =' + opt.access_token);}12345

传递字符串

 var model = this.data.str;
    wx.navigateTo({
      url: '../detail/detail?model=' + model,
    })12345

在下个页面的onload中获取

  onLoad: function (options) {
    var bean = options.model;
    console.log(options.model)
    this.setData({
        model:bean    })
  }12345678

传递对象

通过提供的JSON.stingify方法,将对象转换成字符串后传递

 var model = JSON.stringify( model);
 wx.navigateTo({
    url: '../detail/detail?model=' + model,
  })  
  //接收onLoad: function (options) {//将字符串转换成对象
 var bean = JSON.parse(options.model);}12345678910

注意，传递对象有时会出现错误Uncaught SyntaxError: Unexpected end of input

使用encodeURICompoent与decodeURIComponent来解决即可

 //传递时
 //encodeURICompoent JSON.stringify(model);
 var model = JSON.stringify( model);
  wx.navigateTo({
     url: '../detail/detail?model=' + encodeURICompoent(JSON.stringify(model)),
   }) 
 
 //接收时
 //JAON.parse(decodeURIComponent(model));
 onLoad: function (options) {
  var bean = JSON.parse(decodeURIComponent(options.model));
 }12345678910111213

这种传值方式只适合值比较少的时候使用，传值比较多的时候，还是建议写本地缓存~

3. 使用组件模板 template传递参数

父组件向子组件传值（ properties ）

1、父组件的json文件中声明对引用子组件

// parents.json{
  "usingComponents": {
    "w-child": "/components/child/child"
  }}1234567

2、父组件的wxml中使用子组件

父组件中使用子组件标签，并在标签上写自定义属性对子组件进行传递数据

123

3、子组件在js中获取父组件中传过来的值

properties是组件的对外属性，是属性名到属性设置的映射表，属性设置中可包含三个字段， type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数

// child.jsproperties: {  // 在这里拿到了数据之后可以直接使用了（在wxml模板渲染，或者js中使用this.data.fatherName/this.properties.fatherName 都能获取到），不要直接修改properties属性中的数据
  fatherName: {
    type: String  },
  fatherAge: Number}123456789

官网提示：在 properties 定义段中，属性名采用驼峰写法（fatherName）；在 wxml 中，指定属性值时则对应使用连字符写法（father-name=“winne”），应用于数据绑定时采用驼峰写法（attr="{{fatherName}}"）。

其实我们也可以全都使用驼峰写法（可能会低版本的微信不支持）。

详细组件的配置解析请看官网：
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html

子组件向父组件传值（ this.triggerEvent() ）

需要子组件手动触发事件，然后父组件监听事件

1、子组件触发自定义事件，传递数据给父组件

tab123

2. 子组件在点击事件中主动触发自定义事件

// child.jsonChangeAnchor(e) {
      var index = e.target.dataset.index      
      //子组件传值给父组件
      let myEventDetail = { // 需要传递什么数据就在这个对象中写
        val: index      }
      // myEventDetail 对象，提供给事件监听函数的参数数据
      // changeNaviIndex 是自定义名称事件，父组件中监听使用
      this.triggerEvent('changeNaviIndex', myEventDetail)
    }123456789101112

3. 父组件wxml中监听子组件的自定义事件

 1234

3. 父组件的js中书写事件函数，获取子组件传递过来的数据

// parents.js
  onGetIndex( paramData) { // paramData参数就是子组件的this.triggerEvent()
    console.log(paramData.detail.val)  // 0
  }12345

4. 本地缓存

小程序API提供了本地缓存数据的API，默认可以缓存10M的数据，如下：

wx.setStorageSync('checkin', checkin);1

checkin是一个object，在需要的页面直接调用wx.getStorageSync即可获取，这样就解决了传值较少的问题了。

1. 使用全局变量实现数据传递

2. 页面跳转或重定向时，使用url带参数传递数据

3. 使用组件模板 template传递参数

4. 使用缓存传递参数

5. 使用数据库传递数据

以上是几种常见的传递方法， 希望可以帮到你

可以通过URL参数的形式，可以存在storage里面，可以存在app的全局变量里

1. 使用全局变量实现数据传递
2. 页面跳转或重定向时，使用url带参数传递数据
3. 使用组件模板 template传递参数
4. 使用缓存传递参数
5. 使用数据库传递数据

1  组件传递内容给页面

    给组件设置myevent事件，通过this.triggerEvent('myevent', myEventDetail) 触发该myevent事件并传递内容，在页面用onMyEventshi事件监听传递过来的数据。 

Page({

  // 监听myevent事件

  onMyEvent: function (e) {

    console.log('接收a组件传递的内容:', e.detail) // '我是a组件'

 }})                        

组件

点击Component({

  properties: {}  methods: {

    onTap: function(){

      var myEventDetail = '我是a组件'

      this.triggerEvent('myevent', myEventDetail) // 触发组件上的“myevent”事件

    }  }

})

1  组件传递内容给页面

    给组件设置myevent事件，通过this.triggerEvent('myevent', myEventDetail) 触发该myevent事件并传递内容，在页面用onMyEventshi事件监听传递过来的数据。 

Page({

  // 监听myevent事件

  onMyEvent: function (e) {

    console.log('接收a组件传递的内容:', e.detail) // '我是a组件'

 }})                       

组件

点击Component({

  properties: {}  methods: {

    onTap: function(){

      var myEventDetail = '我是a组件'

      this.triggerEvent('myevent', myEventDetail) // 触发组件上的“myevent”事件

    }  }

})

2  组件与组件通信

两个无任何关联的组件:通过全局变量或本地缓存传递数据

两个有关联的组件(同一个父页面下): 通过上面的方法，用组件 => 页面 => 组件的方式传递数据。

2.页面之间的通信

2-1.使用全局变量 app.globalData

2-2.使用本地缓存 wx.setStorageSync

2-3.url传递

// A页面-传递数据

// 需要注意的是，wx.switchTab 中的 url 不能传参数。

   wx.navigateTo({

                url:'../pageD/pageD?name=raymond&gender=male'

})

// B页面-接收数据//

 通过onLoad的option...Page({

onLoad: function(option){ 

 console.log(option.name +'is'+ option.gender)// raymond is male

this.setData({option: option }) 

 }})

2-2 后一级页面对前一级页面的数据的管理(通过获取到页面对象进行数据操作)

这个方法的精髓，是通过获取到其他页面的对象原型， 然后通过原型方法 setData 对当前对象管理的 data 进行修改 

示例如下:

//pageE.js

Page({

data: {

    index:1

当跳转到下一个页面 F 之后，假定在 F 中有操作需要对 E 中的数据有修改，则可以使用以下方法:

这个方法可以操作页面堆栈里面的页面的数据， 可以做到让后一级页面对上级页面群的数据管理 。

// pageF.js

Page({ 

 changeIndexInE:function(){

varpages = getCurrentPages();

varprevPage = pages[pages.length -2];

 prevPage.setData({ 

 index:0

})

 }})

3，页面与模板之间的通信

传入模板的除了变量，还可以是事件方法对象。例如，模板中的点击事件，可以传递到使用模板的元素中。

页面

Page({

  data: {

    item: {

      index: 0,

      msg: 'this is a template',

      time: '2016-09-15'

    }  }

})

1  组件传递内容给页面

    给组件设置myevent事件，通过this.triggerEvent('myevent', myEventDetail) 触发该myevent事件并传递内容，在页面用onMyEventshi事件监听传递过来的数据。 

Page({

  // 监听myevent事件

  onMyEvent: function (e) {

    console.log('接收a组件传递的内容:', e.detail) // '我是a组件'

 }})                       

组件

点击Component({

  properties: {}  methods: {

    onTap: function(){

      var myEventDetail = '我是a组件'

      this.triggerEvent('myevent', myEventDetail) // 触发组件上的“myevent”事件

    }  }

})

2  组件与组件通信

两个无任何关联的组件:通过全局变量或本地缓存传递数据

两个有关联的组件(同一个父页面下): 通过上面的方法，用组件 => 页面 => 组件的方式传递数据。

2.页面之间的通信

2-1.使用全局变量 app.globalData

2-2.使用本地缓存 wx.setStorageSync

2-3.url传递

// A页面-传递数据

// 需要注意的是，wx.switchTab 中的 url 不能传参数。

   wx.navigateTo({

                url:'../pageD/pageD?name=raymond&gender=male'

})

// B页面-接收数据//

 通过onLoad的option...Page({

onLoad: function(option){ 

 console.log(option.name +'is'+ option.gender)// raymond is male

this.setData({option: option }) 

 }})

2-2 后一级页面对前一级页面的数据的管理(通过获取到页面对象进行数据操作)

这个方法的精髓，是通过获取到其他页面的对象原型， 然后通过原型方法 setData 对当前对象管理的 data 进行修改 

示例如下:

//pageE.js

Page({

data: {

    index:1

当跳转到下一个页面 F 之后，假定在 F 中有操作需要对 E 中的数据有修改，则可以使用以下方法:

这个方法可以操作页面堆栈里面的页面的数据， 可以做到让后一级页面对上级页面群的数据管理 。

// pageF.js

Page({ 

 changeIndexInE:function(){

varpages = getCurrentPages();

varprevPage = pages[pages.length -2];

 prevPage.setData({ 

 index:0

})

 }})

3，页面与模板之间的通信

传入模板的除了变量，还可以是事件方法对象。例如，模板中的点击事件，可以传递到使用模板的元素中。

页面

Page({

  data: {

    item: {

      index: 0,

      msg: 'this is a template',

      time: '2016-09-15'

    }  }

})

大概可以分为三种方法：

一、组件传递内容给页面

给组件设置myevent事件，通过this.triggerEvent('myevent', myEventDetail) 触发该myevent事件并传递内容，在页面用onMyEventshi事件监听传递过来的数据。 

二、组件与组件通信

两个无任何关联的组件：通过全局变量或本地缓存传递数据。

两个有关联的组件(同一个父页面下)： 通过上面的方法，用组件 => 页面 => 组件的方式传递数据。

三、页面与模板之间的通信

传入模板的除了变量，还可以是事件方法对象。例如，模板中的点击事件，可以传递到使用模板的元素中。