Vue-Cli—04. Parent child component value transfer | grandson component value transfer | brother component value transfer

Time:2022-6-14
Vue-Cli—04. Parent child component value transfer | grandson component value transfer | brother component value transfer

1、 Parent component to child

The parent component can transfer values to the child component by binding attributes; The child component receives the value transmitted by the parent component through props.
Parent component:

<div>
   <h2>Animals</h2>
   <Bird :name="name1" :age="age1" ></Bird>
</div>
data() {
    return {
        Name1:'wild goose',
        age1:20
    }
}

Subcomponents:

<div>
  <h2>Animals</h2>
  <div> Name: {{name}}</div>
  <div> age: {{age}}</div>
</div>
//Receive value transfer from parent component
props: ["name", "age"]

2、 Child component to parent

The child component triggers a custom event through $emit to transmit the updated data to the parent component.
Subcomponents:

<div>
  <h2>Birds</h2>
  <div> Name: {{myname} </div>
  <div> age: {{myage} </div>
  <button @click= "updatedata" > modify information </button>
</div>
props: ["name", "age"],
data() {
  return {
    myname: this.name,
    myage: this.age,
  };
},
methods: {
  updateData() {
    this. Myname = "crane";
    this.myage = 10;
    this.$emit("updateData", {name: this.myname,age: this.myage});
  }
}

Parent component:

<div>
   <h2>Animals</h2>
   <div> Name: {{name1}}</div>
   <div> age: {{age1}}</div>
   <Bird :name="name1" :age="age1" @updateData="updateData"></Bird>
</div>
data() {
    return {
        Name1:'wild goose',
        age1:20
    }
},
methods: {
  //This method modifies name1 and age1 data
  updateData(e) {
    this.name1 = e.name;
    this.age1 = e.age;
  }
}

3、 Value transfer of grandson components

First of all, the value passed from ancestors to descendants can also be passed by props, layer by layer. If five or six layers are nested, this method is very cumbersome.
Therefore, provide and inject are used. These two are used together to allow ancestors to inject a dependency into all ancestors’ descendants. The ancestor component adds dependent data through provide. The data defined in it can be selectively injected and directly used by the descendant component through inject.
be careful:The descendant component injects the dependent data in the ancestor component through injection. Like props, the received data is read-only and cannot be modified.

Ancestor component:

<div>
  <div> Name: {{Name2} </div>
  <div> age: {{age2} </div>
  <Bird :name="name1" :age="age1" ></Bird>
</div>
data() {
  return {
    Name2: "Xiaoming",
    age2: 5
  };
}
//Add dependent data. The data defined in it can be selectively injected and directly used by sub components.
provide() {
  return {
    doveName: this.name2,
    doveAge: this.age2,
    //Set the method of modifying Name2 and age2 to depend on data
    updateDove: this.updateDove,
  };
},
methods: {
  updateDove(dove) {
    this.name2 = dove.name;
    this.age2 = dove.age;
  },
}

Descendant components:

<div>
  <h2>Pigeon</h2>
  <div> Name: {{mydovename} </div>
  <div> age: {{mydoveage} </div>
  <button @click= "updatedata" > modify data </button>
</div>
//Inject dependent data from parent components
inject: ["doveName", "doveAge", "updateDove"],
data() {
  return {
    mydoveName: this.doveName,
    mydoveAge: this.doveAge,
  };
},
methods: {
  updateData() {
    this. Mydovename = "Xiaohong";
    this.mydoveAge = 8;
    //Execute updatedove method in parent component
    this.updateDove({ name: this.mydoveName,age: this.mydoveAge, });
  }
}

4、 Sibling component value transfer

On the prototype object of Vue, add a$bus properties, the property value of this property is a Vue instance. All instances of Vue will share the same $bus. This $bus attribute is called the central event bus.
vm.$emit( eventName, […args] ):Triggers an event on the current instance. Additional parameters are passed to the listener callback.
vm.$on( event, callback ):Listen for custom events on the current instance. Events can be controlled by vm$ Emit triggers. The callback function receives additional parameters for all incoming event trigger functions.
vm.$once( event, callback ):Listen to a custom event, but only trigger it once. Once triggered, the listener is removed.
vm.$off( [event, callback] ):Remove the custom event listener.

main. JS file:

Vue.prototype.$bus = new Vue()

Brother a pigeon assembly:
Click the ‘modify crow data’ button in the pigeon component to modify the data on the crow component page.

<div>
  <h2>Pigeon</h2>
  <button @click= "updatecrow" > Modify crow data </button>
</div>
methods: {
  updateCrow() {
    this.$ bus.$ Emit ("updatecrow", {name: "Xiaohuang", age: 20});
  }
}

Brother B crow component:

<div>
  <h2>Crow</h2>
  <div> Name: {{name} </div>
  <div> age: {{age} </div>
</div>
data() {
  return {
    Name: "Xiao Liu",
    age: 20,
  };
},
mounted() {
  //Listen to the updatecrow event. When this event is triggered, the corresponding callback function will be executed
  this.$bus.$on("updateCrow", (e) => {
    this.name = e.name;
    this.age = e.age;
  });
}