Aprendamos la comunicación entre los componentes de VUE (14) desde cero

La comunicación entre los componentes incluye principalmente la comunicación entre los componentes padre e hijo y la comunicación entre los componentes hermanos Es útil en el proyecto de práctica manual reciente, regístrelo como una nota

Comunicación de componentes padre-hijo

Los componentes principales pueden usar propiedades personalizadas para compartir datos con componentes secundarios props:["属性名"]y los componentes secundarios pueden enviar datos a componentes principales a través de eventos personalizados. La comunicación entre padres e hijos se puede realizar fácilmente mediante el uso de atributos personalizados y eventos personalizados.

• Al modificar datos, el subcomponente activa un evento personalizado a través de this.$emit('nombre de la función', valor pasado)
• El evento de vinculación @ se usa en el componente principal y los datos que se pasan del componente secundario al componente principal se reciben a través de val

comunicación entre hermanos

Utilice el componente principal como middleware

La forma más simple y cruda de comunicarse con componentes hermanos simples es usar dos comunicaciones padre-hijo para realizar la comunicación entre hermanos. El componente secundario 1 envía datos al componente principal a través de $emit, y el componente principal recibirá los datos a través de atributos personalizados. Los datos se pasan al subcomponente 2.

Usar EventBus

Pasos para el uso

• Cree el módulo eventBus.js y comparta un objeto de instancia de Vue (o defina un nuevo objeto de bus y móntelo en la cadena de prototipos)

Vue.prototype.$bus = new Vue()

• En el remitente de datos, llame a bus.$emit('nombre del evento', los datos que se enviarán) para activar un evento personalizado

this.$bus.$emit('getDetail', id)

• En el receptor de datos, llame a bus.$on('nombre del evento', función del controlador de eventos) para registrar un evento personalizado

  created () {
    
    
    this.$bus.$on('getDetail', res => {
    
    
      this.goodsId = res
      console.log(res)
    })
  }

Usa VueX

1. Instale el complemento:npm i vuex --save
2. Crear tienda.js

import Vue from 'vue'  
import Vuex from 'vuex'  
Vue.use(Vuex)  
  
export default new Vuex.Store({
    
      
  state:{
    
      
      queryId: '',
  },  
  mutations:{
    
      
    store_queryId(state, queryId) {
    
      
        state.queryId = queryId
    }
  }
})  

3. Presentar y compartir la instancia en main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
    
    
    router,
    store,
    render: h => h(App)
  }).$mount('#app')

4. remitente de datos

this.$store.commit("store_queryId",queryId)

5. receptor de datos

let queryId =  this.$store.state.queryId;