前言

在 Vue 3 開發(fā)中，經(jīng)常需要在不同組件或頁(yè)面之間傳遞數(shù)據(jù)，例如從 index 頁(yè)面獲取某個(gè)數(shù)值（如 cntr、tradeId）后，將其傳輸?shù)?form 頁(yè)面進(jìn)行填寫或編輯

本文將介紹幾種常見的數(shù)據(jù)傳輸方法，并為每種方法提供一個(gè)小的 Demo 代碼示例

總結(jié)對(duì)比

推薦方案

1. 如果只是傳遞少量數(shù)據(jù)（如 ID），URL 傳參最簡(jiǎn)單
2. 如果需要傳遞復(fù)雜對(duì)象（如 JSON），推薦 eventChannel
3. 如果多個(gè)頁(yè)面共享數(shù)據(jù)，Vuex 是更好的選擇
4. 如果需要在頁(yè)面刷新后仍保留數(shù)據(jù)，localStorage 是不錯(cuò)的方案

一開始博主使用的第一種，后續(xù)由于參數(shù)過(guò)多，使用第二種：

1. URL 參數(shù)

適用于簡(jiǎn)單數(shù)據(jù)傳遞，如字符串、數(shù)字等

實(shí)現(xiàn)步驟

1. 在 index 頁(yè)面使用 uni.navigateTo 或 this.$router.push 傳遞參數(shù)
2. 在 form 頁(yè)面通過(guò) onLoad(options) 或 this.$route.query 解析參數(shù)

index.vue

methods: {
  goToForm() {
    uni.navigateTo({
      url: `/pages/form/form?cntr=manong123&tradeId=1`
    });
  }
}

form.vue

優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：適合小型數(shù)據(jù)傳輸，如 ID、狀態(tài)值等
缺點(diǎn)：無(wú)法傳輸復(fù)雜對(duì)象（如 JSON），會(huì)導(dǎo)致數(shù)據(jù)丟失

2. eventChannel 通信

適用于需要傳輸復(fù)雜數(shù)據(jù)（如對(duì)象、數(shù)組）且不希望數(shù)據(jù)暴露在 URL 參數(shù)中的情況

實(shí)現(xiàn)步驟

• index 頁(yè)面通過(guò) success 回調(diào)，使用 eventChannel.emit 傳輸數(shù)據(jù)
• form 頁(yè)面通過(guò) getOpenerEventChannel().on 監(jiān)聽并接收數(shù)據(jù)

index.vue

methods: {
  goToForm() {
    uni.navigateTo({
      url: `/pages/form/form`,
      success: (page) => {
        if (page.eventChannel) {
          page.eventChannel.emit("setItemData", {
            cntr: "manong123",
            tradeId: "1",
            driverName: "碼農(nóng)研究僧"
          });
        }
      }
    });
  }
}

form.vue

onLoad(options) {
  const eventChannel = this.getOpenerEventChannel();
  eventChannel.on("setItemData", (itemData) => {
    this.itemData = itemData;
  });
}

優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：

適合傳輸復(fù)雜數(shù)據(jù)，如 JSON 對(duì)象

數(shù)據(jù)不會(huì)暴露在 URL，安全性較高

缺點(diǎn)：僅適用于 uni.navigateTo 方式，不適用于 redirectTo 或 switchTab

3. Vuex共享

適用于多個(gè)頁(yè)面共享數(shù)據(jù)，或者希望數(shù)據(jù)在頁(yè)面間持久化的情況

實(shí)現(xiàn)步驟

1. 在 Vuex 的 store 中定義 state 并提供 mutation
2. index 頁(yè)面調(diào)用 commit 方法存入數(shù)據(jù)
3. form 頁(yè)面通過(guò) mapState 獲取數(shù)據(jù)

store/index.js

export default {
  state: {
    itemData: {}
  },
  mutations: {
    setItemData(state, data) {
      state.itemData = data;
    }
  }
};

index.vue

methods: {
  goToForm() {
    this.$store.commit("setItemData", {
      cntr: "manong123",
      tradeId: "1",
      driverName: "碼農(nóng)研究僧"
    });
    uni.navigateTo({ url: "/pages/form/form" });
  }
}

form.vue

computed: {
  itemData() {
    return this.$store.state.itemData;
  }
}

優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：

適用于全局狀態(tài)管理，多頁(yè)面數(shù)據(jù)共享

數(shù)據(jù)不會(huì)丟失，即使用戶返回上一頁(yè)

缺點(diǎn)：適用于大規(guī)模項(xiàng)目，小項(xiàng)目可能不必要

4. localStorage 或 sessionStorage

適用于頁(yè)面刷新后仍需保持?jǐn)?shù)據(jù)的情況，如緩存用戶輸入的信息

實(shí)現(xiàn)步驟

1. index 頁(yè)面存入 localStorage
2. form 頁(yè)面從 localStorage 讀取數(shù)據(jù)

index.vue

methods: {
  goToForm() {
    uni.setStorageSync("itemData", {
      cntr: "manong123",
      tradeId: "1",
      driverName: "碼農(nóng)研究僧"
    });
    uni.navigateTo({ url: "/pages/form/form" });
  }
}

form.vue

onLoad(options) {
  this.itemData = uni.getStorageSync("itemData") || {};
}

優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：

適用于短期存儲(chǔ)，頁(yè)面刷新后數(shù)據(jù)仍可用

可用于 redirectTo、switchTab，不受 eventChannel 限制

缺點(diǎn)：

需要手動(dòng)清理，否則可能導(dǎo)致存儲(chǔ)過(guò)多無(wú)用數(shù)據(jù)

以上就是Vue3中從一個(gè)頁(yè)面(index)傳輸數(shù)值到另一個(gè)頁(yè)面(form)的方法詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue3頁(yè)面?zhèn)鬏敂?shù)值的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論