Summary of common vUE component communication modes

Recently, a common scenario encountered in vue2 development project is the communication and parameter transfer between different components, which is sorted as follows:

Parent component = child component

  • Props attribute
<de-attack-list :attack_list="attack_ranking. Ranking_list "></de-attack-list> child component export default {name: "DeAttackList", props: {attack_list: {define the attack_list attribute type: Array, default() {return []; }},}};Copy the code
  • $attrs features
Parent component <de-top-list title=" attack ranking "></de-top-list> Child component <div>{{$attrs.title}}</div> does not need to be defined directlyCopy the code
  • Refs reference
<de-top-list ref='top_list'></de-top-list> Mounted (){this.$refs.top_list. Name =' attack'}  "DeTopList", data(){ return { name: '' } },Copy the code
  • $children
<div class="attack-list"> <de-top-list name=" attack rank "> </de-top-list> </div> Mounted (){ this.$children[0].name = 'attack'; } child component name: "DeTopList", data(){return {name: "}},Copy the code

Child component = parent component

  • emit
Child component name: "DOffenceDefencePie", this.$emit("active_line", line_object); < d-protection = new protection = new protection = new protection = new protection = new protection = new protection > </d-offence-defence-pie>Copy the code

Brother components

Dependency on common ancestor components; Use parent or parent or parent or root

  • $parent
Name: "DOffenceDefencePie", this.$parent.$emit("active_line", line_object); Name: "DeOffenceDefenceUnit", this.$parent.$on('active_line', (line_object)=>{this.update(line_object); ></ div> </div> </div> </div> </div> </div> <div> subcomponent 2 <de-offence-defence-unit :attack_target="attack_targets"></de-offence-defence-unit> </div>Copy the code
  • Root similar to root similar to root Similar to parent

Ancestor component = descendant descendant component

Vue provides provide/ Inject mechanism to support such scenarios with many levels of nesting.

  • provide/inject

    Can realize the ancestor component to all descendant components to pass values

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

Between any two components

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

  • Event bus

Create a Bus class responsible for event distribution, monitoring, callback management; In this way, a new VUE instance is introduced between the components that need to communicate, and the communication and parameter passing are realized through the event triggering and listening of the instance.

Eventbus.js import Vue from 'Vue' const eventBus = new Vue() export {eventBus} component 1 eventBus. $emit('defense_params', {params: $on('defense_params',(params)=>{console.log('on defense_params:', params) }) eventBus.$off(); Use together to avoid duplicate messagesCopy the code

  • vuex

    Vuex is recommended for management in large projects.

vue-router

  • The path and query parameters are passed together
this.$router.push({ path: "/scan_otp_update", query: { QRcode: this.QRcode, code: this.code, device_type: this.device_type } }); this.$route.query.QRcode; ---- Obtain parametersCopy the code
  • The combination of name and params is used to pass parameters
this.$router.push({ name: "scan_otp_update", params: { QRcode: this.QRcode, code: this.code, device_type: this.device_type } }); this.$route.params.QRcode; ---- Obtain parametersCopy the code

Conclusion:

Parameter transfer is a very common scene in development. The above are several communication modes supported by VUE at present. Each mode has a suitable scene, and different communication modes can be adopted to achieve the effect of communication according to the actual needs in the project.