Three ways to transfer values between components

There are three ways to transfer values from vue components: parent to child, child to parent, and non parent-child (same level) components

Refer to a sentence on the official website: the relationship between parent and child components can be summarized as prop passing down and event passing up

The parent component sends data to the child component through prop, and the child component sends messages to the parent component through events, as shown in the following figure:

 

 

 

 

 

 

 

 

 

 

 

1. Father to son

Code of subcomponent:

 1 <template>
 2     <div id="container">
 3         {{msg}}
 4     </div>
 5 </template>
 6 <script>
 7 export default {
 8   data() {
 9     return {};
10   },
11   props:{
12     msg: String
13   }
14 };
15 </script>
16 <style scoped>
17 #container{
18     color: red;
19     margin-top: 50px;
20 }
21 </style>

 

Code of parent component:

 1 <template>
 2     <div id="container">
 3         <input type="text" v-model="text" @change="dataChange">
 4         <Child :msg="text"></Child>
 5     </div>
 6 </template>
 7 <script>
 8 import Child from "@/components/Child";
 9 export default {
10   data() {
11     return {
12       text: "Value of parent component"
13     };
14   },
15   methods: {
16     dataChange(data){
17         this.msg = data
18     }
19   },
20   components: {
21     Child
22   }
23 };
24 </script>
25 <style scoped>
26 </style>

Summary: the implementation of parent-child transfer is to use props attribute. The child component receives the value from the parent component through props attribute. When the parent component transfers the value, use v-bind to bind the reserved variable name in the child component to the data in data.

 

2. Son to father

Subcomponent Code:

 1 <template>
 2     <div id="container">
 3         <input type="text" v-model="msg">
 4         <button @click="setData">Pass to parent</button>
 5     </div>
 6 </template>
 7 <script>
 8 export default {
 9   data() {
10     return {
11       msg: "Value passed to parent component"
12     };
13   },
14   methods: {
15     setData() {
16       this.$emit("getData", this.msg);
17     }
18   }
19 };
20 </script>
21 <style scoped>
22 #container {
23   color: red;
24   margin-top: 50px;
25 }
26 </style>

 

Parent component code:

 1 <template>
 2     <div id="container">
 3         <Child @getData="getData"></Child>
 4         <p>{{msg}}</p>
 5     </div>
 6 </template>
 7 <script>
 8 import Child from "@/components/Child";
 9 export default {
10   data() {
11     return {
12       msg: "Parent component default"
13     };
14   },
15   methods: {
16     getData(data) {
17       this.msg = data;
18     }
19   },
20   components: {
21     Child
22   }
23 };
24 </script>
25 <style scoped>
26 </style>

Conclusion: the implementation of child to parent is to use this.$emit to traverse the getData event. First, use the button to trigger the setData event, use this.$emit to traverse the getData event in setData, and finally return this.msg.

 

 

Conclusion:

 

  • The subcomponent needs to trigger a custom event in some way, such as by clicking on the event
  • Take the value to be passed as the second parameter of $emit, which will be passed as an argument to the method responding to the custom event
  • Register the child component in the parent component and bind the listening to the custom event on the child component label

3. Fatherless

There is no direct child to child parameter transfer method in vue. It is recommended to merge the subcomponents that need to transfer data into one component

If it is necessary to transfer parameters from child to child, it can be transferred from to the parent component and then to the child component (equivalent to a public bus file)

In order to facilitate the development, vue has introduced a state management tool, vuex, which can facilitate the parameter transfer between components. It is recommended to use vuex.

Tags: Javascript Vue Attribute

Posted on Thu, 19 Mar 2020 08:32:43 -0700 by catchy