uniapp實作如何在頁間傳遞數據,需要具體程式碼範例
#在uniapp開發中,頁間傳遞資料是一個非常常見的需求。透過合理的資料傳遞,我們可以實現頁面跳轉時的資料共享和互動。本文將介紹如何在uniapp中實現頁間的資料傳遞,並給出具體的程式碼範例。
URL參數傳遞資料是最常見、也是最簡單的一種方式。透過在跳轉連結的URL中加入參數,實現頁間資料的傳遞。以下是範例程式碼:
// 頁面A
{{param}}
#
// 頁面B
{{pageParam}}
在頁面A中,我們透過按鈕點擊事件跳到頁面B,並攜帶參數pageParam
。在頁面B中,透過onLoad
生命週期函數取得傳遞過來的參數並賦值給pageParam
,然後在頁面上展示。
如果需要在多個頁間共享數據,使用Vuex是個不錯的選擇。 Vuex是一個專為Vue.js應用程式開發的狀態管理模式,也可以在uniapp中使用。下面是一個範例程式碼:
// store/index.js
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
data: 'Hello Uniapp'
},
mutations: {
updateData(state, payload) { state.data = payload }
},
actions: {} ,
getters: {}
})
// 頁面A
{{data}}
// 頁面B
{{data}}