目錄

一、使用全局變量傳遞數(shù)據(jù)

二、本地存儲傳遞數(shù)據(jù)

三、使用路由傳遞數(shù)據(jù)

四、父子組件之間傳值

一、使用全局變量傳遞數(shù)據(jù)

提示：利用 app.js 中的 globalData 將數(shù)據(jù)存儲為全局變量，在需要使用的頁面通過 getApp().globalData 獲取

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

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

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

二、本地存儲傳遞數(shù)據(jù)

提示：利用微信小程序提供的本地存儲 wx.setStorageSync?與 wx.getStorageSync?進行傳值。

　設(shè)值：wx.setStorageSync('title', title)
　取值：var title=wx.getStorageSync('title')

三、使用路由傳遞數(shù)據(jù)

傳遞：

// 跳轉(zhuǎn)的同時攜帶數(shù)據(jù)拼接在URL后面，跳轉(zhuǎn)到的頁面利用onLoad()方法的參數(shù)options即可獲取到傳遞的參數(shù)
wx.navigateTo({
     url: `跳轉(zhuǎn)路由?data=${data}`,
})

接收：

onLoad(options){
    console.log(options)
}

注意：如若因為傳遞的是對象類型的數(shù)據(jù)，到另一個頁面獲取時會發(fā)現(xiàn)是"[object,object]"，解決方法是利用JSON.stringify()和JSON.parse()

傳遞：

const data = JSON.stringify(this.data);
wx.redirectTo({
   url: `跳轉(zhuǎn)url?data=${data}`
})

接收：

onLoad(options){
    const data = JSON.parse(JSON.stringify(options.data));
}

四、父子組件之間傳值

• 父向子傳值使用的是屬性綁定，子組件中 的?properties?對象 進行接收父組件傳遞過來的值
• 子向父傳值使用的是自定義事件，父組件通過自定義事件中的?事件對象e?來接收子組件傳遞過來的值

父向子傳值

• 創(chuàng)建一個?components?文件夾 用于存放子組件。在?components?文件夾下創(chuàng)建我們的子組件?child?, 創(chuàng)建成任何名字都可以，這里創(chuàng)建成?child?。

• ?創(chuàng)建好以后就是引入，把子組件 child?引入到父組件 index?中去。 這里說明一下，此案例創(chuàng)建了兩個頁面，一個是?pages?節(jié)點下的?index?路由頁面，一個是?components?節(jié)點下的?child?組件? 。? ? ?

//在父組件的 json 文件中的 usingComponents節(jié)點下 引入
{
  "usingComponents": {
    "child":"../../components/child/child"
  }
}

• 渲染子組件內(nèi)容到父組件上

給組件起的自定義名字是?child?那么 我們渲染的時候就 在?index 父組件?里寫上一組?<child><child>?標(biāo)簽即可

• 父組件

<child name="{{ name }}" age="{{ age }}" ></child>


export default{
    data(){
        return{
            name:"老五",
            age:50
        }
    }
}

• 子組件

<view>
  這是父組件傳遞過來的值 name: {{ name }}-----age {{age}}
</view>
  

// 接受父組件傳遞過來的值
  properties: {
    name:{
      type:String,
      value:'我是默認(rèn)值：哈哈'
    },
    age:{
      type:Number,
      value:'我是默認(rèn)值： 100'
    }
  },

子向父傳值

• 子組件

WXML

<!-- 點擊按鈕向父組件傳值 -->
<button bindtap="send">點擊按鈕向父組件傳值</button>

JS

?
?  data: {
    msg:'我是子組件的值'
  },
    
  methods: {
    send(){
      this.triggerEvent('send',this.data.msg)
    }
  },

• 父組件

父組件中定義一下這個自定義事件bindsend="send"

WXML

<child  name="{{ name }}" age="{{ age }}" bindsend="send"></child>

JS文章來源地址http://www.zghlxwxcb.cn/news/detail-406052.html

 // 父組件接受子組件傳遞過來的值
  send(e){
    console.log(e.detail);
  }

到了這里，關(guān)于微信小程序的幾種傳值方式的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！