How to implement parameter passing and postback between pages in uniapp

How to implement parameter passing and return between pages in uniapp

1. Parameter passing

In uniapp, we can pass parameters through the path Parameters, props parameters and vuex parameters are used to transfer parameters between pages.

1. Path passing parameters

Path passing parameters refers to splicing parameters directly after the URL and passing them when jumping to another page. When jumping, we pass the parameters to the next page by adding parameters after the URL. On the next page, the value of the parameters can be obtained through the uni.getStorageSync() method.

// 页面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 parameter passing

props parameter passing is to pass the parameters as attributes of the subcomponent. When using the subcomponent in the parent component, additional attributes are added to pass the parameters. Get the passed parameters through this.$props in the child component.

// 父组件
<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 parameter passing

vuex is a state management tool in uniapp. We can use vuex to transfer parameters between pages. When sending parameters, store the parameters in the state of vuex. When receiving parameters, obtain the value of the parameter through the getters method of vuex.

// 页面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

2. Postback

In uniapp, postback between pages can be achieved through the uni.navigateBack method and the EventBus event bus.

1. uni.navigateBackbackback

The uni.navigateBack method is used to return to the previous page, and can be passed back by passing parameters.

// 页面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 Event Bus Postback

EventBus is a tool for communication between components. In uniapp, you can use uni.$emit to publish events and uni. $on subscribes to the event and returns it.

// 页面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: '回传的参数'}
})

Through the above method, we can implement parameter transfer and return between pages in uniapp. Through path parameter passing, props parameter passing, vuex parameter passing, uni.navigateBack passing back and EventBus passing back, etc., you can choose the appropriate method according to actual needs to realize the passing and returning of parameters.

The above is the detailed content of How to implement parameter passing and postback between pages in uniapp. For more information, please follow other related articles on the PHP Chinese website!