微信小程序的組件間三種傳值方式

第一種:全局傳值

// 步驟一:在全局app.js文件中定義數(shù)據(jù)
App({
  globalData: {
    userInfo: null,
    userName: '全局變量傳值',
  }
})

// 步驟二:獲取應(yīng)用實例,不然無法調(diào)用全局變量
const app = getApp()

// 步驟三:調(diào)用全局變量
Page({
  data: {
  
  },
  onLoad: function (options) {
    console.log(app.globalData.userName);
  },
})

第二種:url傳值

// 步驟一:使用關(guān)鍵字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代表的遍歷對象的下標(biāo)
    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傳值

// 步驟一:使用關(guān)鍵字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);
  },
})
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容