Explicación detallada del método de transferencia de valor entre componentes de vue

La transferencia de valor entre componentes se divide en dos categorías

1. Pasar valor durante la transición de componentes (pasar valor entre componentes hermanos)

2. Pasar valores entre componentes principales y secundarios

3. Pasar valor a través de Vuex

1. Pasar valores entre componentes hermanos

Solución:
use params y query para pasar valores

Un componente

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

Página B

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

Al pasar los parámetros a través de la consulta, los datos no desaparecerán después de que se actualice la página. ¡Pero los params desaparecerán después de refrescarse!

Pero si desea pasar valores a través de pramas y los datos de la página no desaparecen, solo necesita agregar los parámetros correspondientes a la ruta en la configuración de enrutamiento.
Ejemplo: (nombre: 'XXX', ruta: '/ XXX /: id', componente: XXX)

Sin embargo, la URL de la página pasada a través de la consulta mostrará la información de los parámetros pasados, mientras que params no.

Resumir params y consulta:
Seguridad: params no mostrará la información del parámetro pasado en la url. Si es información importante, se recomienda utilizar params.
Conveniencia: consulta no necesita reconfigurar el enrutamiento para lograr que los parámetros de actualización no desaparezcan
. Las características de parmas y query son las anteriores Estos, puedes usarlos según sea necesario (๑ • ̀ ㅂ • ́) و✧

2. Pasar valores entre componentes principales y secundarios

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

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

1. El componente principal pasa el valor al componente secundario

Componente padre

': totalCount': el parámetro que el componente secundario necesita para
aceptar 'TotalCount': el parámetro pasado por el componente principal

Subconjunto
Acepta valores a través de accesorios

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

2. El componente secundario pasa el valor al componente principal.

Subconjunto
Personalice un evento y páselo al componente principal

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

Componente padre
Agregue la declaración del método accept al subcomponente registrado

@paging="OtherData"

@paging es un método que acepta definiciones de componentes secundarios (equivalente a un puente que conecta componentes principales y secundarios)

otherData es el método definido por el componente principal

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

3. Pasar parámetros a través de Vuex

Vuex es equivalente a un lugar público, si quieres pasar parámetros, solo necesitas
leer y escribir los datos en vuex.

Primero defina los datos en 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
   })

Escribir datos

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

Leer los datos

this.$store.state.table

Todos sienten que es muy conveniente usar vuex ︿ (￣︶￣) ︿

ps: En cuanto a la instalación y configuración de vuex, habrá un tutorial más adelante (# 'O')