vue_communication

Create a Vue instance (2.6) to tease out your concept of communication (value passing) between Vue components

First, the communication mode of the component is combed out

  • Parent-child communication

  • Props passed from father to son

    • The first parameter is the name of the custom event and the second parameter is the value of the event (if there are many values, they will be sent as objects in the second parameter).
    • Vuex global
    • $refs named component
    • Parentparent ParentChildren Component queue
    • Descendant components pass values privide Inject

  • Brother communication

    • Define a new instance on the vUE prototype using busbus BusEMIT +$ON fetch
    • vuex

  • Every generation of communication

    • privide inject
    • vuex

  • There are some storage route parameters do not reference

Parent
child: [“count”],

The $emit sub-component custom method is passed in the second parameter

sayLove() {
this.$emit("sayLove", "I love you cxx");
},
Copy the code

Parent component receive

<children @sayLove="getLove" />
getLove(e) {
console.log(e);
},
Copy the code

As the global management of VUE, VUEX can be used for all kinds of communication.

$refs.son. CXX + “=====> refs”);


p a r e n t parent children

console.log(this.$children[0].cxx + " =====> $children");
console.log(this.$parent.count + " =====> parent");
Copy the code

Privide Inject parent component

Provide () {return {father: this, // give the descendant receive}; },Copy the code

offspring

inject: ["father"],
data() {
return {
count: this.father.count,
};
},
Copy the code

Prototype.$bus = new Vue() this.$bus.$emit(“sayLoveToBro”, “I love you cxxBro”); Then $on receives this.$bus.$on(“sayLoveToBro”, this.getLove)

Source code library: github.com/cxx3668119/…