Parlons de la méthode de livraison d'uniapp

Uniapp est une solution qui permet un développement multiplateforme. Elle nous permet d'écrire du code une seule fois et de l'exécuter sur plusieurs plateformes, telles que iOS, Android et Web. Pour les développeurs, c’est une bonne chose car cela permet d’économiser beaucoup de temps et d’énergie. Dans le développement d'Uniapp, nous avons souvent besoin de transférer des données et des méthodes entre les pages, c'est pourquoi cet article vous présentera certaines méthodes de transfert.

1. Utilisez Vuex pour transmettre des données

Dans Uniapp, nous pouvons utiliser Vuex pour partager des données. Vuex est un mode de gestion d'état spécialement développé pour les applications Vue.js. Nous pouvons définir l'état, les mutations, les actions, les getters, etc. dans le magasin pour transférer des données. Dans chaque composant, si nous avons besoin d'obtenir des données, il nous suffit d'utiliser mapState, mapMutations, mapActions, mapGetters et d'autres fonctions pour obtenir et modifier facilement des données.

Définissez l'état dans le fichier store.js :

state:{
    count:0
},
mutations:{
    increment(state){//自增
        state.count++
    },
    decrement(state){//自减
        state.count--
    }
},
actions:{
    asyncIncrement({commit}){//异步自增
        setTimeout(()=>{
            commit('increment')
        },1000)
    },
    asyncDecrement({commit}){//异步自减
        setTimeout(()=>{
            commit('decrement')
        },1000)
    }
}

Obtenez et modifiez les données dans la page d'utilisation :

import {mapState,mapMutations,mapActions} from 'vuex'
export default {
    data(){
        return{
        }
    },
    computed:{
        ...mapState([
            'count'
          ])
    },
    methods:{
        ...mapMutations([
            'increment',
            'decrement'
        ]),
        ...mapActions([
            'asyncIncrement',
            'asyncDecrement'
        ])
    }
}

2 Utilisez le paramètre uni.navigateBack pour passer

Lorsque la page saute, nous pouvons utiliser le paramètre uni.navigateBack. méthode Le paramètre object in est utilisé pour transmettre des données. Ce paramètre est un objet de type Object et peut être obtenu lors du onLoad de la page suivante.

Sur la page d'envoi :

uni.navigateBack({
    delta:1,
    success(res){
        console.log('回跳成功')
    },
    fail(res){
        console.log('回跳失败')
    },
    complete(res){
        console.log('回跳完成')
    },
    animation:true,//使用动画返回
    aniationDuration:2000,//动画持续时间
    aniationType:'pop-out',//动画类型
    title:'返回页面',//导航栏标题
    formData:{//携带的参数
        id:1,
        name:'张三'
    }
})

Sur la page de réception :

onLoad:function(options){
    console.log(options)
    if(options.formData){
        this.formData = options.formData
    }
}

3. Utiliser des événements personnalisés pour la livraison

Dans Uniapp, nous pouvons utiliser $emit pour déclencher des événements personnalisés, et nous pouvons utiliser $on dans le composant pour écoutez ces événements. L'événement est déclenché via $emit dans le composant parent. Lorsque le composant enfant est appelé dans le composant parent, l'objet du composant enfant est transmis via $emit, puis l'objet est écouté et reçu dans le composant enfant.

Dans le composant d'envoi :

methods：{
    sendEvent(){
        this.$emit('event',this.formData) //传递this.formData给监听方
    }
}

Dans le composant de réception :

mounted(){
    this.$on('event',data=>{
        console.log(data) //接收数据并进行操作
    })
}

Résumé :

Ce qui précède sont les méthodes de livraison couramment utilisées dans Uniapp. Pour les développeurs, ils doivent choisir de manière flexible différentes méthodes de livraison pendant le développement. la plus simple à mettre en œuvre et la plus adaptée à la situation. Il convient de mentionner que Vuex est l'une des fonctions principales d'Uniapp lors du transfert de données entre plusieurs composants, son utilisation est l'approche la plus recommandée pour éviter les pertes de performances causées par un code trop complexe.

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!