Summary of vue2 common component communication modes

Then is me 2021-09-15 10:26:46

vue Summary of common component communication methods

Recently vue2 Under development , A common scenario is the communication and parameter transfer between different components , It is now arranged as follows :

Parent component =》 Child components

  • props attribute
 Parent component
<de-attack-list :attack_list="attack_ranking.ranking_list" ></de-attack-list>
 
Child components
export default {
  name: "DeAttackList",
  props: {
    attack_list: { Definition attack_list attribute
      type: Array,
      default() {
        return [];
      },
    },
  },
};
 
 Copy code 
  • $attrs characteristic
   Parent component
  <de-top-list title=" Attack ranking "></de-top-list>
 
  Child components
  <div>{{$attrs.title}}</div> There is no need to define direct use
 
 Copy code 
  • refs quote
 Parent component -- Modify the content of the child component in the parent component
<de-top-list ref='top_list'></de-top-list>
mounted(){
    this.$refs.top_list.name = 'attack'
  }
 
Child components
  name: "DeTopList",
  data(){
    return {
      name: ''
    }
  },
   
 Copy code 
  • $children
 Parent component
<div class="attack-list">
    <de-top-list name=" Attack ranking " ref='top_list'></de-top-list>
</div>
 
mounted(){
    this.$children[0].name = 'attack'; Pass... In the parent component $children Modify the attributes of child elements
  }
 
Child components
  name: "DeTopList",
  data(){
    return {
      name: ''
    }
  },
   
 Copy code 

Child components =》 Parent component

  • emit
 Child components
name: "DOffenceDefencePie",
this.$emit("active_line", line_object);
 
Parent component
  <d-offence-defence-pie
    @active_line="update_attack_targets"   The parent component receives
    :offence_defence_data="offence_defence_data">
  </d-offence-defence-pie>
 
 Copy code 

Brother components

Rely on common ancestor components ; use p a r e n t perhaps parent perhaps root

  • $parent
 Child components 1
name: "DOffenceDefencePie",
this.$parent.$emit("active_line", line_object);
​
Child components 2
name: "DeOffenceDefenceUnit",
this.$parent.$on('active_line', (line_object)=>{
  this.update(line_object);
})
​
Parent component
<div> Child components 1
  <d-offence-defence-pie :offence_defence_data="offence_defence_data"></d-offence-defence-pie>
</div>
<div> Child components 2
  <de-offence-defence-unit :attack_target="attack_targets"></de-offence-defence-unit>
</div>
​
​
 Copy code 
  • r o o t similar root similar parent Usage mode

Ancestor component =》 Descendant component

For this scenario with more nesting levels ,vue Provides provide/inject Mechanism to support ;

  • provide/inject

    It can pass values from ancestor components to all descendant components

 Ancestor component
  name: "Defense",
  provide(){
    return {
    init_params: getYearStartEnd(),
    }
  },
 
Sun component
  name: "DeTopList",
  inject:['init_params'],
   
  <p>{{init_params}}</p>
 
 
 
 Copy code 

Between any two components

There are two ways to communicate between any two components : Event bus or VUEX

  • Event bus

Create a Bus Class is responsible for event dispatch 、 monitor 、 Callback management ; The way is between components that need to communicate , All introduce a new vue example , Communication and parameter transmission are realized through event triggering and listening of the instance .

eventBus.js
import Vue from 'vue'
const eventBus = new Vue()
export { eventBus }
​
Components 1
EventBus.$emit('defense_params', {params: this.params})
​
​
Components 2
EventBus.$on('defense_params',(params)=>{
    console.log('on defense_params:', params)
  })
​
eventBus.$off(); Use together to avoid duplicate messages
 Copy code 
  • vuex

    It is recommended to use in general large-scale projects vuex To manage .

vue-router

  • path and query Combined parameter transmission
 this.$router.push({
          path: "/scan_otp_update",
          query: {
            QRcode: this.QRcode,
            code: this.code,
            device_type: this.device_type
          }
        });
this.$route.query.QRcode; ---- To obtain parameters
 
 Copy code 
  • name and params Combined parameter transmission
 this.$router.push({
          name: "scan_otp_update",
          params: {
            QRcode: this.QRcode,
            code: this.code,
            device_type: this.device_type
          }
        });
this.$route.params.QRcode; ---- To obtain parameters
 
 Copy code 

summary :

Parameter passing is a common scenario in development , The above is the current vue Several communication modes supported , Each method has a more suitable scenario , Different communication methods can be adopted in the project according to the actual needs to achieve the effect of communication .

Please bring the original link to reprint ,thank
Similar articles

2021-09-15

2021-09-15

2021-09-15

2021-09-15