Detailed explanation of how Vue components transfer values ​​to each other

Overview

We all know that Vue is a lightweight front-end framework, and its core is component-based development. Vue is made up of components one by one. Componentization is its essence and one of its most powerful features. The scopes of component instances are independent of each other, which means that data between different components cannot reference each other.

But in the actual project development process, we need to access the data of other components, so there is a problem of component communication. The relationships between components in Vue are: father and child, brothers, and generations apart. How to realize data transmission for different relationships is what we will talk about next.

1. Parent component passes value to child component

That is, the parent component passes values ​​to the child component through attributes, and the child component receives them through props.

Bind custom properties in the child component tag of the parent component

// Parent component <user-detail :myName="name" />
    
export default {
    components:
        UserDetail
    }
    ......
}

Use props (which can be an array or an object) to receive it in the child component. Multiple attributes can be passed.

// Subcomponent export default {
    props: ['myName']
}
​
/*
props: { myName: String } //Specify the type passed in this way. If the type is incorrect, a warning will be issued props: { myName: [String, Number] } // Multiple possible types prosp: { myName: { type: String, requires: true } } //Required string props: { 
    childMsg: { 
        type: Array, 
        default: () => [] 
    }
} // default specifies the default value. If props validation fails, a warning will be issued in the console.
*/

The values ​​of the parent component received by the child component are divided into reference type and common type:

Common types: String, Number, Boolean, Null

Reference types: Array, Object

Based on Vue's one-way data flow, that is, the data between components is unidirectional, and child components are not allowed to directly modify the values ​​​​passed by the parent component, so this operation of directly modifying the values ​​​​passed by the parent component should be avoided, otherwise the console will report an error.

If the value passed is a simple data type, it can be modified in the child component without affecting other sibling components that also call the value from the parent component.

The specific operation is to first reassign the passed value to a variable in data, and then change that variable.

// Subcomponent export default {
    props: ['myName'],
    data() {
        return {
            name : this.myName // Assign the passed value to the new variable}
    },
    watch:
        myName(newVal) {
            this.name = newVal //Listen to the value passed from the parent component, and if it changes, change the value inside the child component as well}
    },
    methods: {
        changeName() {  
            this.name = 'Lily' // Only the internal value is modified here, so no error will be reported},
    }
}

Note: If you do not use watch to listen to the myName value passed by the parent component, the name value in the child component will not change with the myName value of the parent component, because name: this.myName in data only defines an initial value.

If the value of the reference type is modified in the child component, the parent component will also be modified because its data is public, and other child components that also reference the value will also be modified. It can be understood that the value passed from the parent component to the child component is equivalent to making a copy, and the pointer of this copy still points to the one in the parent component, that is, it shares the same reference. So unless there is a special need, don't modify it easily.

2. Child components pass values ​​to parent components

1. The subcomponent binds an event and triggers it through this.$emit()

Bind an event in the child component and define a function for this event

// Child component <button @click="changeParentName">Change the name of the parent component</button>
​
export default {
    methods: {
        //Subcomponent event changeParentName: function() {
            this.$emit('handleChange', 'Jack') // Trigger the handleChange event in the parent component and pass it to Jack
            // Note: The event name here must be consistent with the event name bound in the parent component}
    }
}

Define and bind the handleChange event in the parent component

// Parent component <child @handleChange="changeName"></child>
​
methods: {
    changeName(name) { // The name parameter is the value passed in from the child component Jack
        this.name = name
    }
}

2. Through callback function

First define a callback function in the parent component and pass the callback function to it

// Parent component <child :callback="callback"></child>
​
methods: {
    callback: function(name) {
        this.name = name
    }
}

Receive in the child component and execute the callback function

// Child component <button @click="callback('Jack')">Change the name of the parent component</button>
​
props: {
    callback: Function,
}

3. Access component instances via $parent / $children or $refs

Both methods get the component instance directly, and you can call the component method or access the data directly after use.

// Subcomponent export default {
  data () {
    return {
      title: 'Subcomponent'
    }
  },
  methods: {
    sayHello() {
        console.log('Hello');
    }
  }
}

// Parent component <template>
  <child ref="childRef" />
</template>
​
<script>
  export default {
    created () {
      // Access the child component through $ref console.log(this.$refs.childRef.title); // Child component this.$refs.childRef.sayHello(); // Hello
      
      //Call the child component method through $children this.$children.sayHello(); // Hello 
    }
  }
</script>

Note: Component communication in this way cannot cross levels.

3. Transferring values ​​between sibling components

1. Still through the combination of $emit and props

In the parent component, bind the variables to be passed to the two brother components and define the events

// Parent component <child-a :myName="name" />
<child-b :myName="name" @changeName="editName" />  
    
export default {
    data() {
        return {
            name: 'John'
        }
    },
    components:
        'child-a': ChildA,
        'child-b': ChildB,
    },
    methods: {
        editName(name) {
            this.name = name
        },
    }
}

Receive variables and bind trigger events in child component B

// child-b component<p>Name: {{ myName }}</p>
<button @click="changeName">Change name</button>
    
<script>
export default {
    props: ["myName"],
    methods: {
        changeName() {
            this.$emit('changeName', 'Lily') // trigger event and pass value}
    }
}
</script>

// child-a component<p>Name: {{ newName }}</p>
    
<script>
export default {
    props: ["myName"],
    computed: {
        newName() {
            if(this.myName) { // Check if there is a value passed return this.myName
            }
            return 'John' //Default value if no value is passed}
    }
}
</script>

That is, when child component B triggers the parent component's event function editName through $emit(), changing the parent component's variable name value, the parent component can pass the changed value to child component A through props, thereby realizing data transfer between sibling components.

2. Through an empty vue instance

Create an EventBus.js file and expose a vue instance

import Vue from 'Vue'
export default new Vue()

Import this empty vue instance in the file to pass the value, bind the event and trigger the event function through $emit

(You can also import the js file globally in main.js. I usually import it in the components I need to use.)

<template>
    <div>
        <p>Name: {{ name }}</p>
        <button @click="changeName">Change name</button>
    </div>
</template>
​
<script>
import { EventBus } from "../EventBus.js"
​
export default {
 data() {
     return {
         name: 'John',
     }
  },
  methods: {
      changeName() {
          this.name = 'Lily'
          EventBus.$emit("editName", this.name) // trigger a global event and pass the changed value to the event function}
    }
}
</script>

Import the vue instance in the component that receives the value, listen to the callback through $on, and the callback function receives all the parameters passed in when the event is triggered.

import { EventBus } from "../EventBus.js"
​
export default {
    data() {
        return {
            name: ''
        }
    },
    created() {
         EventBus.$on('editName', (name) => {
             this.name = name
         })
    }
}

This method of creating an empty vue instance is equivalent to creating an event center or a transit station for transmitting and receiving events. This method is also applicable to any communication between components, including parent-child, sibling, and cross-level. It is convenient for projects with simple communication requirements, but for more complex situations or larger projects, you can use the more complex state management mode Vuex provided by Vue to handle it.

4. Multi-layer parent-child component communication

Sometimes the two components that need to communicate are not direct parent-child components, but grandfather and grandchild, or parent-child components spanning more levels. In this case, it is impossible for the child component to pass parameters upward one level at a time. Especially when the component hierarchy is deep and there are many nested components, there are many events and attributes that need to be passed, which will make the code very confusing.

At this time, you need to use the higher-level method provided by Vue: provide/inject.

This pair of options should be used together to allow an ancestor component to inject a dependency into all of its descendants, no matter how deep the component hierarchy is, and always works as long as the upstream and downstream relationships hold.

Provide/inject: Simply put, variables are provided through provider in the parent component, and then injected into the child component through inject. No matter how deep the component hierarchy is, the variable will always be valid during the life cycle of the parent component.

Parent component:

export default {
  provide: { // Its function is to provide the variable **name** to all its child components.
    name: 'Jack'
  }
}

Subcomponents:

export default {
  inject: ['name'], // Injected the name variable provided by the parent component mounted () {
    console.log(this.name); // Jack
  }
}

Note: provide and inject bindings are not reactive. That is, when the name of the parent component changes, the child component will not change accordingly.

If you want to provide and inject data responses, there are two ways:

Provide an instance of the ancestor component, and then inject dependencies into the descendant component, so that the properties of the ancestor component instance can be directly modified in the descendant component. However, this method has a disadvantage that many unnecessary things such as props and methods are mounted on this instance.

// Parent component <div>
      <button @click="changeName">Change name</button>
      <child-b />
</div>
<script>
    ......
    data() {
        return {
            name: "Jack"
        };
    },
    provide() {
        return {
            parentObj: this //Provide an instance of the ancestor component};
    },
    methods: {
        changeName() {
            this.name = 'Lily'
        }
    }
</script>

Values ​​in descendant components:

<template>
  <div class="border2">
    <P>Name: {{parentObj.name}}</P>
  </div>
</template>
<script>
  export default {
    inject: {
      parentObj: {
        default: () => ({})
      }
    } // or inject: ['parentObj']
  };
</script>

Note: This method is often used in functional components. Functional components are stateless (no responsive data), non-instantiated (no this context), and do not have any lifecycle processing methods inside. Therefore, they have high rendering performance and are more suitable for components that depend on external data transmission.

Summarize

Parent-child communication: Parent passes data to child through props, and child passes data to parent through $emit; communicate through $parent / $children; $ref can also access component instances; provide / inject; $attrs / $listeners;

Brother communication: EventBus; Vuex;

Cross-level communication: EventBus; Vuex; provide / inject; $attrs / $listeners;

The above is a detailed explanation of how Vue components pass values ​​to each other. For more information about Vue, please pay attention to other related articles on 123WORDPRESS.COM!