Comment implémenter le passage de paramètres et la publication entre les pages dans uniapp

Comment implémenter le transfert de paramètres et le retour entre les pages dans uniapp

1. Transfert de paramètres

Dans uniapp, nous pouvons réaliser des paramètres entre les pages via le transfert de paramètres de chemin, le transfert de paramètres d'accessoires et le transfert de paramètres vuex.

1. Passage des paramètres de chemin

Le passage des paramètres de chemin signifie que lorsque vous passez à une autre page, les paramètres sont directement épissés après l'URL et transmis. Lors du saut, nous passons les paramètres à la page suivante en ajoutant des paramètres après l'URL. Sur la page suivante, la valeur des paramètres peut être obtenue via la méthode 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. passage des paramètres props

Le passage des paramètres props consiste à transmettre les paramètres en tant qu'attributs du sous-composant. Lors de l'utilisation du sous-composant dans le composant parent, des attributs supplémentaires sont ajoutés pour transmettre les paramètres. Obtenez les paramètres transmis via this.$props dans le composant enfant.

// 父组件
<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. transfert de paramètres vuex

vuex est un outil de gestion d'état dans uniapp Nous pouvons utiliser vuex pour transférer des paramètres entre les pages. Lors de l'envoi de paramètres, stockez les paramètres dans l'état de vuex. Lors de la réception des paramètres, obtenez la valeur du paramètre via la méthode getters de 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. Publication

Dans uniapp, la publication entre les pages peut être réalisée via la méthode uni.navigateBack et le bus d'événements EventBus.

1. uni.navigateBack

La méthode uni.navigateBack est utilisée pour revenir à la page précédente et peut être renvoyée en passant des paramètres.

// 页面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 est un outil de communication entre les composants dans uniapp, vous pouvez utiliser uni.$emit pour publier des événements et uni.$on pour vous abonner à des événements pour la publication.

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

Grâce à la méthode ci-dessus, nous pouvons implémenter le transfert de paramètres et le retour entre les pages dans uniapp. Grâce au passage des paramètres de chemin, au passage des paramètres props, au passage des paramètres vuex, au renvoi d'uni.navigateBack et au renvoi d'EventBus, etc., vous pouvez choisir la méthode appropriée en fonction des besoins réels pour réaliser le passage et le retour des paramètres.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!