小程序页面传值、页面与组件通信方式总结

在小程序开发中，页面传值经常会用到，如果有调用组件和插件的话还会涉及到页面与组件的通信传值等，今天我是想来总结下微信小程序页面和组件传值。

一.页面与页面的传值

1.跳转的url带参传值

微信小程序页面直接传值我们经常用到的是页面URL跳转传值，跳转到的页面通过到生命周

期onLoad里面接收。

//A页面Page({data:{},linkTo:function(){//页面事件绑定方法let data = 'hello world';wx.navigateTo({url: '/pages/my/index?name=' + data,})}
}）//B页面
Page({data:{name:' '},onLoad:function(option){//接收数据this.setData({name: option.name})}
}）

如果页面有多个值要传，直接用&符合链接起来就可以了。

比如'/pages/my/index?name=' + data1+'&number='+data2;

2.全局globalData传值

//app.jsApp({onLaunch (options) {// Do something initial when launch.},onShow (options) {// Do something when show.},onHide () {// Do something when hide.},onError (msg) {console.log(msg)},globalData: {name:'hello world'}})//A页面const app = getApp();//获取全局对象Page({data:{},onLoad:function(){let name = app.globalData.name;console.log(name);//hello world}}）

全局数据的拿去是通过拿去globalData对象，再到其他页面获取，当然你也可以

修改全局对象里面数据其他页面从新去获取。

//A页面const app = getApp();//获取全局对象Page({data:{},onLoad:function(){app.globalData.name='微信小程序'; //修改全局数据}}）//B页面const app = getApp();//获取全局对象Page({data:{},onLoad:function(){let name = app.globalData.name;console.log(name);//微信小程序}}）

3.页面数据缓存wx.setStorageSync(KEY,DATA)

//A页面Page({data:{},onLoad:function(){wx.setStorage({key:"name",data:"hello world"})}}）//B页面Page({data:{},onLoad:function(){var value = wx.getStorageSync('name')；console.log(value);// hello world}}）

此处缓存数据要用同步wx.setStorageSync(),因为异步有可能数据或者有可能会获取不到

二.页面与组件通信

在开发中，很多页面中会使用相同的组件，这时可以将具有相同信息的部分封装成一个组件，方便开发中调用。在调用中可能会涉及到数据的传递问题，例如页面与组件，组件与组件直接的数据传递。

首先看看页面与组件直接的数据传递。

1. 组件需要获取页面传递数据，可以使用组件的属性来传递值

2. 页面需要获取组件中修改的数据，可以使用组件中的事件触发页面中定义的事件来获取

第一、组件获取页面中数据

　　先创建一个自定义组件test-component

<!--components/test-component/test-component.wxml-->
<view><input class=‘new-name‘ placeholder=‘请输入名字‘ bindinput="bindInputFunc" value=‘{{inputValue}}‘></input><button class=‘btn‘ size=‘mini‘ bind:tap=‘search‘>搜索</button><view>搜索记录:</view><block wx:for=‘{{records}}‘ wx:for-index="index" wx:for-item="record"><view class=‘record‘>{{record}}</view></block>
</view>

第一、在组件test-component.js中定义一个属性

// components/test-component/test-component.js
Component({/*** 组件的属性列表*/properties: {namesData: {type:Array,value:[],observer: function (newVal, oldVal, changedPath) {// 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：‘_propertyChange‘// 通常 newVal 就是新设置的数据， oldVal 是旧数据console.log(newVal);console.log(oldVal);this.setData({records:newVal})}}},/*** 组件的初始数据*/data: {inputValue:‘‘,records: []},/*** 组件的方法列表*/methods: {//输入框输入事件bindInputFunc: function (e) {this.setData({inputValue: e.detail.value})},/*** 组件搜索按钮事件*/search: function() {let records = [...this.data.records];records.push(this.data.inputValue);this.setData({ records, inputValue: ‘‘ })this.triggerEvent("search", { records});/*var myEventDetail = {} // detail对象，提供给事件监听函数var myEventOption = {} // 触发事件的选项this.triggerEvent(‘myevent‘, myEventDetail, myEventOption)触发事件的选项包括：选项名            类型        是否必填        默认值        描述bubbles           Boolean       否           false        事件是否冒泡composed         Boolean       否           false        事件是否可以穿越组件边界，为false时，事件将只能在引用组件的节点树上触发，不进入其他任何组件内部capturePhase      Boolean       否           false         事件是否拥有捕获阶段*/}}
})

{"usingComponents":{"test-component":"/components/test-component/test-component"}
}

<test-component namesData=‘{{names}}‘ bind:search=‘homeSearch‘></test-component>

// pages/home/home.js
Page({ /*** 页面的初始数据*/data: {names:[‘aaaa‘,‘bbbb‘,‘cccc‘]},
/*** 搜索的点击事件*/homeSearch: function(e) {console.log(e.detail); // 自定义组件触发事件时提供的detail对象}})