微信小程序的组件间三种传值方式

it2024-12-26  11

前言:

        小程序直接的传值

第一种:全局传值,注意要创建实例

// 步骤一:在全局app.js文件中定义数据 App({ globalData: { map: '', } }) // 步骤二:组件1给全局变量赋值 var app = getApp(); app.globalData.map = this.data.centerData; // 步骤三:组件2使用全局变量 var app = getApp(); let map = app.globalData.map

第二种:url传值,注意,只能穿字符串

// 步骤一:使用关键字bindtap绑定一个点击事件方法,data-index是传入一个值 <image class="btn-detail" src='/images/btn_detail.png' bindtap='toDetail' data-index='{{index}}'></image> // 步骤二:在脚本文件中定义这个方法(方法并不是定义在一个methods集合中的) Page({ data: {}, onLoad: function () {}, toDetail: function(e){ // index代表的遍历对象的下标 var index = e.currentTarget.dataset.index; var proList = this.data.proList; var title = proList[index].proName; wx.navigateTo({ url: '/pages/detail/detail?title='+title, }) } }) // 步骤三:在detail组件的脚本文件中接收title这个传入过来的值 Page({ data: {}, onLoad: function (options) { console.log(options.title); }, })

第三种:Storage传值

// 步骤一:使用关键字bindtap绑定一个点击事件方法,data-index是传入一个值 <image class="btn-detail" src='/images/btn_detail.png' bindtap='toDetail' data-index='{{index}}'></image> // 步骤二:在脚本文件中定义这个方法(方法并不是定义在一个methods集合中的) Page({ data: {}, onLoad: function () {}, toDetail: function(e){ var index = e.currentTarget.dataset.index; var proList = this.data.proList; var title = proList[index].proName; wx.setStorageSync('titleName', title); wx.navigateTo({ url: '/pages/detail/detail', }) } }) // 步骤三:在detail组件的脚本文件中使用wx.getStorageSync接收titleName这个传入过来的值 Page({ data: {}, onLoad: function (options) { var titlen = wx.getStorageSync('titleName'); console.log(titlen); }, })

到此结束

最新回复(0)