Parlons de la façon dont Uniapp appelle d'autres pages

Avec le développement rapide des applications mobiles, nous utilisons de plus en plus H5 pour développer des applications multiplateformes. En tant que framework populaire pour le développement multiplateforme front-end, Uniapp est favorisé par de plus en plus de développeurs pour ses fonctions puissantes et ses fonctionnalités faciles à utiliser. Dans le développement Uniapp, nous avons souvent besoin d'appeler des méthodes sur d'autres pages pour implémenter certaines fonctions. Cet article présentera comment Uniapp appelle d'autres pages.

1. Appel via vuex

vuex est un outil de gestion des données dans Uniapp. Il stocke les données dans un état global et peut être appelé dans n'importe quel composant. Nous pouvons effectuer des appels de méthode sur d'autres pages via vuex. Voici un exemple simple :

// store.js
const store = new Vuex.Store({
  state: {
    someData: 'Hello World'
  },
  mutations: {
    changeData(state, newData) {
      state.someData = newData
    }
  }
})

Dans le composant qui doit appeler cette méthode, nous pouvons utiliser la méthode this.$store.commit() pour appeler :

// otherComponent.vue
export default {
  methods: {
    changeData(newData) {
      this.$store.commit('changeData', newData)
    }
  }
}

2 Appel via uni.$emit

En fait, il existe également de bons composants. dans la méthode Vue Communication : livraison d'événements, Uniapp prend également en charge cette méthode. Nous pouvons utiliser la méthode uni.$emit() pour déclencher un événement personnalisé dans un composant, et utiliser $on() pour écouter l'événement et effectuer les opérations correspondantes dans un autre composant.

Dans le composant source :

// sourceComponent.vue
export default {
  methods: {
    emitEvent(data) {
      uni.$emit('eventName', data)
    }
  }
}

Dans le composant cible :

// targetComponent.vue
export default {
  created() {
    uni.$on('eventName', this.handleEvent)
  },
  methods: {
    handleEvent(data) {
      console.log(data)
    }
  }
}

De cette façon, nous pouvons appeler la méthode d'un autre composant dans un composant pour obtenir une interaction fonctionnelle entre composants.

3. Appelez via uni.navigateTo

Dans le processus de développement proprement dit, nous devons souvent passer d'une page à une autre et effectuer certaines opérations dans une autre page. Nous pouvons utiliser la méthode uni.navigateTo pour accéder à la page et effectuer les opérations correspondantes dans la page cible.

Dans la page source :

// sourcePage.vue
export default {
  methods: {
    navigateToTarget() {
      uni.navigateTo({
        url: '/pages/targetPage/targetPage',
        success() {
          console.log('跳转成功')
        }
      })
    }
  }
}

Dans la page cible, nous pouvons utiliser la fonction onLoad() pour effectuer les opérations correspondantes lors du chargement de la page :

// targetPage.vue
export default {
  onLoad(options) {
    console.log(options)
  }
}

4. Appel via le bus d'événements uni-app

Uni-. L'application fournit une fonction de bus d'événements, qui peut être utilisée pour établir la communication entre différentes pages. La méthode d'utilisation est très simple. Nous pouvons importer uni sur n'importe quelle page et utiliser sa fonction de publication-abonnement.

Dans la page source, nous utilisons $emit pour déclencher un événement personnalisé :

// sourcePage.vue
export default {
  methods: {
    emitEvent(data) {
      uni.$emit('eventName', data)
    }
  }
}

Dans la page cible, nous pouvons utiliser $on pour écouter l'événement et effectuer les actions correspondantes :

// targetPage.vue
export default {
  created() {
    uni.$on('eventName', this.handleEvent)
  },
  methods: {
    handleEvent(data) {
      console.log(data)
    }
  }
}

Résumé

Lors du développement d'Uniapp , nous Il est souvent nécessaire d'appeler des méthodes sur d'autres pages pour implémenter certaines fonctions. Grâce à Vuex, à la diffusion d'événements, aux sauts de page et au bus d'événements Uni-app, nous pouvons implémenter des méthodes d'appel entre pages pour faciliter le développement et améliorer l'évolutivité des applications.

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!