如何在uniapp中實現頁間的傳參與回傳

如何在uniapp中實作頁間的傳參與回傳

#一、傳參

在uniapp中，我們可以透過路徑傳參、props傳參和vuex傳參的方式實現頁間的參數傳遞。

1. 路徑傳參

路徑傳參指的是跳到另一個頁面時，將參數直接拼接在URL後面傳遞。在跳轉時，我們透過在URL後面加上參數的方式將參數傳遞給下一個頁面，在下一個頁面可以透過uni.getStorageSync()方法來取得參數的值。

// 页面A
uni.navigateTo({
  url: '/pages/B/B?param1=123&param2=456'
})

// 页面B
onLoad: function (options) {
  console.log(options.param1) //输出123
  console.log(options.param2) //输出456
}

2. props傳參

props傳參是將參數作為子元件的屬性傳遞，在父元件中使用子元件時附加屬性來傳遞參數。在子元件中透過this.$props取得傳遞的參數。

// 父组件
<template>
  <child-component :param1="param1"></child-component>
</template>

<script>
export default {
  data() {
    return {
      param1: '123',
      param2: '456'
    }
  }
}
</script>

// 子组件
<template>
  <view>{{ $props.param1 }}</view>
  <view>{{ $props.param2 }}</view>
</template>

3. vuex傳參

vuex是uniapp中的狀態管理工具，我們可以使用vuex來進行頁間的參數傳遞。在發送參數時，將參數儲存到vuex的state。在接收參數時，透過vuex的getters方法取得參數的值。

// 页面A
<template>
  <button @click="sendParam">传递参数</button>
</template>

<script>
export default {
  methods: {
    sendParam() {
      this.$store.commit('SET_PARAM', '参数值')
      uni.navigateTo({
        url: '/pages/B/B'
      })
    }
  }
}
</script>

// 页面B
onLoad: function () {
  console.log(this.$store.getters.param) //输出参数值
}

// store
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    param: ''
  },
  mutations: {
    SET_PARAM(state, value) {
      state.param = value
    }
  },
  getters: {
    param: state => state.param
  }
})

export default store

二、回傳

在uniapp中，頁面之間的回傳可以透過uni.navigateBack方法以及EventBus事件匯流排來實現。

1. uni.navigateBack回傳

uni.navigateBack方法用來傳回上一層頁面，可以透過傳遞參數的方式回傳。

// 页面A
uni.navigateTo({
  url: '/pages/B/B'
})

// 页面B
uni.navigateBack({
  delta: 1,
  success: function () {
    uni.getOpenerEventChannel().emit('acceptDataFromB', {data: '回传的参数'})
  }
})

// 页面A
onLoad: function () {
  const eventChannel = this.getOpenerEventChannel()
  eventChannel.on('acceptDataFromB', function (data) {
    console.log(data) //输出{data: '回传的参数'}
  })
}

2. EventBus事件匯流排回傳

EventBus是用於元件之間的通訊的工具，在uniapp中可以使用uni.$emit發布事件和uni. $on訂閱事件的方式進行回傳。

// 页面A
// main.js
Vue.prototype.$eventBus = new Vue()

// 页面B
this.$eventBus.$emit('acceptDataFromB', {data: '回传的参数'})
uni.navigateBack({
  delta: 1
})

// 页面A
this.$eventBus.$on('acceptDataFromB', function (data) {
  console.log(data) //输出{data: '回传的参数'}
})

透過上述方法，我們可以在uniapp中實現頁間的參數傳遞和回傳。透過路徑傳參、props傳參、vuex傳參以及uni.navigateBack回傳和EventBus回傳等方式可以根據實際需求選擇適合的方法來實現參數的傳遞和回傳。

以上是如何在uniapp中實現頁間的傳參與回傳的詳細內容。更多資訊請關注PHP中文網其他相關文章！