前言

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

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

總結(jié)對比

推薦方案

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

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

1. URL 參數(shù)

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

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

1. 在 index 頁面使用 uni.navigateTo 或 this.$router.push 傳遞參數(shù)
2. 在 form 頁面通過 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)：無法傳輸復(fù)雜對象（如 JSON），會導(dǎo)致數(shù)據(jù)丟失

2. eventChannel 通信

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

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

• index 頁面通過 success 回調(diào)，使用 eventChannel.emit 傳輸數(shù)據(jù)
• form 頁面通過 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 對象

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

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

3. Vuex共享

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

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

1. 在 Vuex 的 store 中定義 state 并提供 mutation
2. index 頁面調(diào)用 commit 方法存入數(shù)據(jù)
3. form 頁面通過 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)管理，多頁面數(shù)據(jù)共享

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

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

4. localStorage 或 sessionStorage

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

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

1. index 頁面存入 localStorage
2. form 頁面從 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)：

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

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

缺點(diǎn)：

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

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

最新評論