前言

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

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

總結對比

推薦方案

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

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

1. URL 參數

適用于簡單數據傳遞，如字符串、數字等

實現步驟

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

index.vue

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

form.vue

優(yōu)缺點

優(yōu)點：適合小型數據傳輸，如 ID、狀態(tài)值等
缺點：無法傳輸復雜對象（如 JSON），會導致數據丟失

2. eventChannel 通信

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

實現步驟

• index 頁面通過 success 回調，使用 eventChannel.emit 傳輸數據
• form 頁面通過 getOpenerEventChannel().on 監(jiān)聽并接收數據

index.vue

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

form.vue

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

優(yōu)缺點

優(yōu)點：

適合傳輸復雜數據，如 JSON 對象

數據不會暴露在 URL，安全性較高

缺點：僅適用于 uni.navigateTo 方式，不適用于 redirectTo 或 switchTab

3. Vuex共享

適用于多個頁面共享數據，或者希望數據在頁面間持久化的情況

實現步驟

1. 在 Vuex 的 store 中定義 state 并提供 mutation
2. index 頁面調用 commit 方法存入數據
3. form 頁面通過 mapState 獲取數據

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: "碼農研究僧"
    });
    uni.navigateTo({ url: "/pages/form/form" });
  }
}

form.vue

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

優(yōu)缺點

優(yōu)點：

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

數據不會丟失，即使用戶返回上一頁

缺點：適用于大規(guī)模項目，小項目可能不必要

4. localStorage 或 sessionStorage

適用于頁面刷新后仍需保持數據的情況，如緩存用戶輸入的信息

實現步驟

1. index 頁面存入 localStorage
2. form 頁面從 localStorage 讀取數據

index.vue

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

form.vue

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

優(yōu)缺點

優(yōu)點：

適用于短期存儲，頁面刷新后數據仍可用

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

缺點：

需要手動清理，否則可能導致存儲過多無用數據

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

最新評論