Explication détaillée de la méthode de transfert de valeur entre les composants vue

Le transfert de valeur entre les composants est divisé en deux catégories

1. Valeur de passage pendant la transition de composant (transmission de valeur entre les composants frères)

2. Transmission de valeurs entre les composants parents et enfants

3. Transmettez la valeur via Vuex

1. Transmission de valeurs entre les composants frères

Solution:
utilisez des paramètres et une requête pour transmettre des valeurs

Un composant

1.A页面中的代码this.$router.push({name: 'XXX', params: {id: id}})
或
this.$router.push({path: '/XXX',name:'XXX  query: {id: id}})

Page B

id :this.$route.params.id 
或
id :this.$route.query.id

En passant des paramètres via la requête, les données ne disparaîtront pas une fois la page actualisée. Mais les paramètres disparaîtront après le rafraîchissement! `

Mais si vous voulez passer des valeurs via des pramas et que les données de la page ne disparaissent pas, il vous suffit d'ajouter les paramètres correspondants au chemin dans la configuration de routage.
Exemple: (nom: 'XXX', chemin: '/ XXX /: id', composant: XXX)

Cependant, l'URL de la page passée par la requête affichera les informations des paramètres passés, contrairement aux paramètres.

Récapitulez les paramètres et la requête:
Sécurité: les paramètres n'afficheront pas les informations de paramètre transmises sur l'URL. S'il s'agit d'informations importantes, il est recommandé d'utiliser des paramètres.
Pratique: la requête n'a pas besoin de reconfigurer le routage pour que les paramètres d'actualisation ne disparaissent pas
. Les caractéristiques des parmas et de la requête sont les suivantes Ceux-ci, vous pouvez les utiliser au besoin (๑ • ̀ ㅂ • ́) و✧

2. Transmission de valeurs entre les composants parents et enfants

例子：（父组件中注册的子组件）

        <pagination-font  
        :totalCount="totalCount"  
        :currentPath="currentPath"  
        @paging="otherData"        
        ></pagination-font>

1. Le composant parent transmet la valeur au composant enfant

Composant parent

': totalCount': le paramètre dont le composant enfant a besoin pour
accepter 'totalCount': le paramètre passé par le composant parent

Sous-ensemble
Accepter les valeurs via des accessoires

  props: {
      totalCount:  { 
      type: Number,      //接受值的类型
           default: 0    //默认值
           } 
      }

2. Le composant enfant transmet la valeur au composant parent

Sous-ensemble
Personnalisez un événement et transmettez-le au composant parent

     this.$emit("paging", response.data.allData.list);

Composant parent
Ajouter l'instruction de la méthode accept au sous-composant enregistré

@paging="OtherData"

@paging est une méthode qui accepte les définitions de composants enfants (équivalent à un pont reliant les composants parents et enfants)

otherData est la méthode définie par le composant parent

    OtherData(data) {
          this.messageList = data;  // data==response.data.allData.list
           }

3. Passer les paramètres via Vuex

Vuex équivaut à un espace public. Si vous voulez passer des paramètres, il vous suffit de
lire et d'écrire les données dans vuex.

Définissez d'abord les données dans vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const state = {    
table:""
}  

const mutations = { 
    GET_TABLE:(state,data)=>{   state.table=data  }
    }
    
const actions = {}
export default new Vuex.Store({ 
   state, 
   mutations,
   actions
   })

Écrire des données

this.$store.commit("GET_TABLE",table)

Lisez les données

this.$store.state.table

Tout le monde pense qu'il est très pratique d'utiliser vuex ︿ (￣︶￣) ︿

ps: Quant à l'installation et la configuration de vuex, il y aura un tutoriel plus tard (# `O ')