In-depth understanding of the seven communication methods of Vue components

In-depth understanding of the seven communication methods of Vue components

The way Vue components communicate is a very high-frequency question in interviews. I often encountered this question when I first started looking for an internship. At that time, I only knew to go back to props and $emit. Later, as I learned more, I found that there are so many ways for Vue components to communicate!

Today I will summarize the communication methods of Vue components. If there are any omissions, please leave a message.

1. props/$emit

Introduction

I believe everyone is very familiar with props and $emit, which is our most commonly used Vue communication method.

props: props can be an array or an object, used to receive data passed from the parent component through v-bind. When props is an array, the properties passed by the parent component are directly received; when props is an object, the property type, default value, whether it is required, and validation rules can be set through configurations such as type, default, required, and validator.

$emit: When parent-child components communicate, we usually use $emit to trigger the parent component v-on to bind the corresponding event listener on the child component.

Code Sample

The following code implements the parent-child component communication of props and $emit. In this example, we have implemented the following communication:

Passing values ​​from parent to child: The parent component passes the parent component message value to the child component through: messageFromParent="message". When the parent component's input tag is entered, the content in the child component's p tag will change accordingly.

Passing values ​​from child to parent: The parent component binds the listener of the receive event to the child component through @on-receive="receive". When the child component input tag is entered, the receive callback function is triggered. The value of the child component message is assigned to the parent component messageFromChild through this.$emit('on-receive', this.message), changing the content of the parent component p tag.

Please see the code:

// Subcomponent code <template>
  <div class="child">
    <h4>this is a child component</h4>
    <input type="text" v-model="message" @keyup="send" />
    <p>Received a message from the parent component: {{ messageFromParent }}</p>
  </div>
</template>
<script>
export default {
  name: 'Child',
  props: ['messageFromParent'], // Receive messages from parent components through props data() {
    return {
      message: '',
    }
  },
  methods: {
    send() {
      this.$emit('on-receive', this.message) // Trigger the on-receive event through $emit, call the receive callback in the parent component, and use this.message as a parameter},
  },
}
</script>
// Parent component code <template>
  <div class="parent">
    <h3>this is the parent component</h3>
    <input type="text" v-model="message" />
    <p>Received a message from a child component: {{ messageFromChild }}</p>
    <Child :messageFromParent="message" @on-receive="receive" />
  </div>
</template>
<script>
import Child from './child'
export default {
  name: 'Parent',
  data() {
    return {
      message: '', // Message passed to child component messageFromChild: '',
    }
  },
  components:
    Child,
  },
  methods: {
    receive(msg) { // Receive the information of the child component and assign it to messageFromChild
      this.messageFromChild = msg
    },
  },
}
</script>

Effect Preview

2. v-slot

Introduction

v-slot is a new API added in Vue2.6 for unified implementation of slots and named slots, which is used to replace APIs such as slot (abandoned in 2.6.0), slot-scope (abandoned in 2.6.0), and scope (abandoned in 2.5.0).

v-slot is used in the template tag to provide a named slot or a slot that needs to receive props. If v-slot is not specified, the default value is used.

Code Sample

Please see the code example of v-slot below, in this example we have achieved:

Passing value from parent to child: The parent component passes the message value of the parent component to the child component through <template v-slot:child>{{ message }}</template>, and the child component receives the corresponding content through <slot name="child"></slot>, thus realizing the parent-to-child value transfer.

// Subcomponent code <template>
  <div class="child">
    <h4>this is a child component</h4>
    <p>Received a message from the parent component:
      <slot name="child"></slot> <!--Show the {{message}} passed by the parent component through the slot-->
    </p>
  </div>
</template>
<template>
  <div class="parent">
    <h3>this is the parent component</h3>
    <input type="text" v-model="message" />
    <Child>
      <template v-slot:child>
        {{ message }} <!--The content to be displayed in the slot-->
      </template>
    </Child>
  </div>
</template>
<script>
import Child from './child'
export default {
  name: 'Parent',
  data() {
    return {
      message: '',
    }
  },
  components:
    Child,
  },
}
</script>

Effect Preview

3. $refs/ $parent/ $children/$root

Introduction

We can also obtain the Vue component instance through $refs/$parent/$children/$root, etc., and obtain the properties and methods bound to the instance to achieve communication between components.

$refs: We usually bind $refs to DOM elements to get the attributes of DOM elements. In implementing component communication, we can also bind $refs to the child component to obtain the child component instance.

$parent: We can directly use this.$parent in Vue to get the parent component instance of the current component (if any).

$children: Similarly, we can also directly use this.$children in Vue to get the array of child component instances of the current component. However, it should be noted that the element subscripts in the this.$children array do not necessarily correspond to the order of the child components referenced by the parent component. For example, asynchronously loaded child components may affect their order in the children array. Therefore, when using it, you need to find the corresponding subcomponent based on certain conditions, such as the name of the subcomponent.

$root: Get the root Vue instance of the current component tree. If the current instance has no parent, this instance will be itself. Through $root, we can achieve cross-level communication between components.

Code Sample

Let's take a look at an example of using $parent and $children (since the usage of these APIs is similar, the use of $refs and $root will not be expanded here. In this example, it is implemented:

Passing values ​​from parent to child: The child component obtains the value of the message in the parent component through $parent.message.

Passing values ​​from child to parent: The parent component obtains the array of child component instances through $children, then traverses the array, obtains the corresponding Child1 child component instance through the instance name and assigns it to child1, and then obtains the message of the Child1 child component through child1.message.

The code is as follows:

// Subcomponent <template>
  <div class="child">
    <h4>this is a child component</h4>
    <input type="text" v-model="message" />
    <p>Received a message from the parent component: {{ $parent.message }}</p> <!--Display the message of the parent component instance-->
  </div>
</template>
<script>
export default {
  name: 'Child1',
  data() {
    return {
      message: '', // The parent component can get the message of the child component instance through this.$children
    }
  },
}
</script>
// Parent component <template>
  <div class="parent">
    <h3>this is the parent component</h3>
    <input type="text" v-model="message" />
    <p>Received a message from a child component: {{ child1.message }}</p> <!--Display the message of the child component instance-->
    <Child />
  </div>
</template>
<script>
import Child from './child'
export default {
  name: 'Parent',
  data() {
    return {
      message: '',
      child1: {},
    }
  },
  components:
    Child,
  },
  mounted() {
    this.child1 = this.$children.find((child) => {
      return child.$options.name === 'Child1' // Get the child instance of the corresponding name through options.name})
  },
}
</script>

Effect Preview

4. $attrs/$listener

Introduction

$attrs and $listeners are both new attributes added in Vue2.4, mainly used by users to develop advanced components.

$attrs: Used to receive attribute properties that are not recognized as props in the parent scope, and can be passed to internal components via v-bind="$attrs" - very useful when creating high-level components.

Imagine that when you create a component, you need to receive dozens of parameters such as param1, param2, param3, etc. If you use props, you need to declare a lot of them through props: ['param1', 'param2', 'param3', ...]. It would be even more troublesome if some of these props needed to be passed to deeper subcomponents.

When using $attrs, you don’t need any declarations. You can use it directly through $attrs.param1, $attrs.param2, etc., and examples are also given above for passing to deep sub-components, which is very convenient.

$listeners: Contains the v-on event listeners in the parent scope. It can be passed to inner components via v-on="$listeners" - very useful when creating higher-level components, where the method of passing is very similar to $attrs.

Code Sample

In this example, there are three components: A, B, and C, and their relationship is: [A [B [C]]], where A is the parent component of B and B is the parent component of C. That is: Level 1 component A, Level 2 component B, Level 3 component C. We achieved:

Passing values ​​from parent to child: Level 1 component A passes the message attribute to level 2 component B through :messageFromA="message", and level 2 component B obtains the message of level 1 component A through $attrs.messageFromA.

:messageFromA="message"
v-bind="$attrs"
$attrs.messageFromA

Passing values ​​from child to parent: Level 1 component A binds the keyup event listener on the descendant component through @keyup="receive", and level 2 component B binds the keyup event to its input tag through v-on="$listeners". When input is input into the input box of level 2 component B, the receive callback of level 1 component A will be triggered, and the value in the input box of level 2 component B will be assigned to the messageFromComp of level 1 component A, thereby transferring values ​​from child to parent.

@keyup="receive"
<CompC v-on="$listeners" />
v-on="$listeners"

The code is as follows:

// Level 3 component C
<template>
  <div class="compc">
    <h5>this is a C component</h5>
    <input name="compC" type="text" v-model="message" v-on="$listeners" /> <!--Bind the keyup listener callback of component A to the input-->
    <p>Received a message from component A: {{ $attrs.messageFromA }}</p>
  </div>
</template>
<script>
export default {
  name: 'Compc',
  data() {
    return {
      message: '',
    }
  },
}
</script>
// Level 2 component B
<template>
  <div class="compb">
    <h4>this is B component</h4>
    <input name="compB" type="text" v-model="message" v-on="$listeners" /> <!--Bind the keyup listener callback of component A to the input-->
    <p>Received a message from component A: {{ $attrs.messageFromA }}</p>
    <CompC v-bind="$attrs" v-on="$listeners" /> <!--Pass the listener callback of component A's keyup to component C, and pass the attrs passed by component A to component C-->
  </div>
</template>
<script>
import CompC from './compC'
export default {
  name: 'CompB',
  components:
    CompC,
  },
  data() {
    return {
      message: '',
    }
  },
}
</script>
// A component <template>
  <div class="compa">
    <h3>this is a component</h3>
    <input type="text" v-model="message" />
    <p>Received message from {{ comp }}: {{ messageFromComp }}</p>
    <CompB :messageFromA="message" @keyup="receive" /> <!--Listen to the keyup event of the descendant component and pass the message to the descendant component-->
  </div>
</template>
<script>
import CompB from './compB'
export default {
  name: 'CompA',
  data() {
    return {
      message: '',
      messageFromComp: '',
      comp: '',
    }
  },
  components:
    CompB,
  },
  methods: {
    receive(e) { // Listen for the callback of the keyup event of the descendant component, and assign the value of the input box where the keyup is located to messageFromComp
      this.comp = e.target.name
      this.messageFromComp = e.target.value
    },
  },
}
</script>

Effect Preview

5. provide/inject

Introduction

The provide/inject 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 in effect as long as the upstream and downstream relationships hold. If you are familiar with React, you will immediately think of the Context API, which is very similar.

provide: is an object, or a function that returns an object. This object contains properties that can be injected into its descendants, that is, the attributes and attribute values ​​to be passed to the descendants.

injcet: an array of strings, or an object. When it is a string array, the usage is very similar to props, except that the received attributes are changed from data to attributes in provide. When it is an object, similar to props, you can set default values ​​by configuring properties such as default and from, use new named properties in subcomponents, etc.

Code Sample

There are three components in this example, level 1 component A, level 2 component B, and level 3 component C: [A [B [C]]], where A is the parent component of B and B is the parent component of C. The example implements:

Passing values ​​from parent to child: Level 1 component A injects message into descendant components through provide, and level 2 component B receives the message in level 1 component A through inject: ['messageFromA'], and obtains the content property value of the message in level 1 component A through messageFromA.content.

Cross-level downward value transmission: Level 1 component A injects message into descendant components through provide. Level 3 component C receives the message in level 1 component A through inject: ['messageFromA'] and obtains the content property value of the message in level 1 component A through messageFromA.content, thus achieving cross-level downward value transmission.

The code is as follows:

// Level 1 component A
<template>
  <div class="compa">
    <h3>this is a component</h3>
    <input type="text" v-model="message.content" />
    <CompB />
  </div>
</template>
<script>
import CompB from './compB'
export default {
  name: 'CompA',
  provide() {
    return {
      messageFromA: this.message, // pass the message to the descendant component through provide}
  },
  data() {
    return {
      message: {
        content: '',
      },
    }
  },
  components:
    CompB,
  },
}
</script>
// Level 2 component B
<template>
  <div class="compb">
    <h4>this is B component</h4>
    <p>Received a message from component A: {{ messageFromA && messageFromA.content }}</p>
    <CompC />
  </div>
</template>
<script>
import CompC from './compC'
export default {
  name: 'CompB',
  inject: ['messageFromA'], // Accept the message passed by provide in A through inject
  components:
    CompC,
  },
}
</script>
// Level 3 component C
<template>
  <div class="compc">
    <h5>this is a C component</h5>
    <p>Received a message from component A: {{ messageFromA && messageFromA.content }}</p>
  </div>
</template>
<script>
export default {
  name: 'Compc',
  inject: ['messageFromA'], // Accept the message passed by provide in A through inject
}
</script>

Note:

Some students may want to ask me why the message in the first-level component A above uses the object type instead of the string type, because the provide and inject bindings in vue are not responsive. If message is of string type, after changing the message value through the input box in the first-level component A, it cannot be assigned to messageFromA. If it is of object type, when the object attribute value changes, the attribute value in messageFromA can still be changed accordingly, and the object attribute value received by the descendant component inject can also change accordingly.

If a descendant provides the same attribute as the ancestor, the descendant will overwrite the ancestor's provide value. For example, if level 2 component B also injects a messageFromA value into level 3 component C through provide, messageFromA in level 3 component C will preferentially receive the value injected by level 2 component B instead of level 1 component A.

Effect Preview

6. eventBus

Introduction

EventBus, also known as event bus, registers a new Vue instance, listens to and triggers events of this instance by calling $emit and $on of this instance, and realizes global communication of components by passing in parameters. It is a component without DOM, and only has instance methods, so it is very lightweight.

We can do this by registering it on the global Vue instance:

// main.js
Vue.prototype.$Bus = new Vue()

But when the project is too large, we'd better abstract the event bus into a single file and import it into each component file that needs to be used. This way, it doesn't pollute the global namespace:

// bus.js, import it through import import Vue from 'vue'
export const Bus = new Vue()

Principle Analysis

The principle of eventBus is actually quite simple, which is to use the subscription-publishing mode and implement the two methods $emit and $on:

// eventBus principle export default class Bus {
  constructor() {
    this.callbacks = {}
  }
  $on(event, fn) {
    this.callbacks[event] = this.callbacks[event] || []
    this.callbacks[event].push(fn)
  }
  $emit(event, args) {
    this.callbacks[event].forEach((fn) => {
      fn(args)
    })
  }
}

// Import the following in main.js // Vue.prototype.$bus = new Bus()

Code Sample

In this example, there are a total of 4 components: [A [B [C, D]]], level 1 component A, level 2 component B, level 3 component C and level 3 component D. We achieved this by using eventBus:

Global communication: This includes communication between parent and child components, communication between sibling components, and communication between cross-level components. The operation logic of the four components is the same. When inputting into the input box, the sendMessage event callback is triggered through this.$bus.$emit('sendMessage', obj), and the sender and message are encapsulated into objects and passed in as parameters; at the same time, the sendMessage events of other components are listened through this.$bus.$on('sendMessage', obj), and the values ​​of sender and message of the current component are instantiated. In this way, when the value of any component input box changes, other components can receive the corresponding information and achieve global communication.

The code is as follows:

// main.js
Vue.prototype.$bus = new Vue()
// Level 1 component A
<template>  
  <div class="containerA">   
    <h2>this is CompA</h2>  
    <input type="text" v-model="message" @keyup="sendMessage" />   
    <p v-show="messageFromBus && sender !== $options.name">      
      Received message from {{ sender }}: {{ messageFromBus }}   
    </p>   
    <CompB /> 
  </div>
</template>
<script>
import CompB from './compB'
export default {  
  name: 'CompA', 
  components:   
    CompB,  
  },  
  data() {  
    return {    
      message: '',    
      messageFromBus: '',      
      sender: '',   
    } 
  },  
  mounted() {   
    this.$bus.$on('sendMessage', (obj) => { // Listen to the sendMessage event through eventBus const { sender, message } = obj    
      this.sender = sender     
      this.messageFromBus = message  
    }) 
  }, 
  methods: {  
    sendMessage() {     
      this.$bus.$emit('sendMessage', { // Trigger the sendMessage event through eventBus sender: this.$options.name,     
        message: this.message,   
      })   
    }, 
  },
}
</script>
// Level 2 component B
<template> 
  <div class="containerB">   
    <h3>this is CompB</h3>  
    <input type="text" v-model="message" @keyup="sendMessage" />  
    <p v-show="messageFromBus && sender !== $options.name">     
      Received message from {{ sender }}: {{ messageFromBus }}  
    </p>  
    <CompC />  
    <CompD /> 
  </div>
</template>
<script>
import CompC from './compC'
import CompD from './compD'
export default { 
  name: 'CompB', 
  components:  
    CompC,  
    CompD,  
  }, 
  data() {  
    return {    
      message: '',   
      messageFromBus: '',    
      sender: '',   
    } 
  }, 
  mounted() {    
    this.$bus.$on('sendMessage', (obj) => { // Listen to the sendMessage event through eventBus const { sender, message } = obj     
      this.sender = sender     
      this.messageFromBus = message  
    }) 
  }, 
  methods: {  
    sendMessage() {   
      this.$bus.$emit('sendMessage', { // Trigger the sendMessage event through eventBus sender: this.$options.name,    
        message: this.message,    
     })   
   },  
 },
}
</script>
// Level 3 component C
<template> 
  <div class="containerC">  
    <p>this is CompC</p>   
    <input type="text" v-model="message" @keyup="sendMessage" />   
    <p v-show="messageFromBus && sender !== $options.name">      
      Received message from {{ sender }}: {{ messageFromBus }}  
    </p> 
  </div>
</template>
<script>
export default {  
  name: 'CompC',
  data() {   
    return {   
      message: '',   
      messageFromBus: '',   
      sender: '',   
    } 
  }, 
  mounted() {  
    this.$bus.$on('sendMessage', (obj) => { // Listen to the sendMessage event through eventBus const { sender, message } = obj    
      this.sender = sender    
      this.messageFromBus = message   
    })  
  },
  methods: {   
    sendMessage() {    
      this.$bus.$emit('sendMessage', { // Trigger the sendMessage event through eventBus sender: this.$options.name,     
        message: this.message,     
      })   
    }, 
  },
}
</script>
// Level 3 component D
<template> 
  <div class="containerD">   
    <p>this is CompD</p>   
    <input type="text" v-model="message" @keyup="sendMessage" />   
    <p v-show="messageFromBus && sender !== $options.name">     
      Received message from {{ sender }}: {{ messageFromBus }} 
    </p> 
  </div>
</template>
<script>
export default { 
  name: 'CompD', 
  data() {  
    return {   
      message: '',   
      messageFromBus: '',   
      sender: '',   
    } 
  }, 
  mounted() {   
    this.$bus.$on('sendMessage', (obj) => { // Listen to the sendMessage event through eventBus const { sender, message } = obj    
      this.sender = sender   
      this.messageFromBus = message   
    }) 
  }, 
  methods: {  
    sendMessage() {   
      this.$bus.$emit('sendMessage', { // Trigger the sendMessage event through eventBus sender: this.$options.name,     
        message: this.message,   
      })  
    }, 
  },
}
</script>

Effect Preview

The image is too large, please take a screenshot

7. Vuex

When a project becomes large and multiple people maintain the same project, if an event bus is used for global communication, changes in global variables may be difficult to predict. Thus, Vuex was born.

Vuex is a state management pattern developed specifically for Vue.js applications. It uses centralized storage to manage the status of all components of an application and uses corresponding rules to ensure that the status changes in a predictable manner.

For more information about Vuex, please refer to the official Vuex documentation [1]. I will not explain it in detail here, but just look at the code.

Code Sample

The Vuex instance and event bus leisi also contain 4 components: [A [B [C, D]]], level 1 component A, level 2 component B, level 3 component C and level 3 component D. In this example we implemented:

Global communication: The content of the code is similar to eventBus, but it is much easier to use than eventBus. Each component monitors the changes of the input box through watch, and triggers mutations through vuex's commit to change the value of stroe. Then each component dynamically obtains data from the store through computed, thereby achieving global communication.

//store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    message: {
      sender: '',
      content: '',
    },
  },
  mutations:
    sendMessage(state, obj) {
      state.message = {
        sender: obj.sender,
        content: obj.content,
      }
    },
  },
})
// Component A
<template>
  <div class="containerA">
    <h2>this is CompA</h2>
    <input type="text" v-model="message" />
    <p v-show="messageFromStore && sender !== $options.name">
      Received message from {{ sender }}: {{ messageFromStore }}
    </p>
    <CompB />
  </div>
</template>
<script>
import CompB from './compB'
export default {
  name: 'CompA',
  components:
    CompB,
  },
  data() {
    return {
      message: '',
    }
  },
  computed: {
    messageFromStore() {
      return this.$store.state.message.content
    },
    sender() {
      return this.$store.state.message.sender
    },
  },
  watch:
    message(newValue) {
      this.$store.commit('sendMessage', {
        sender: this.$options.name,
        content: newValue,
      })
    },
  },
}
</script>

Just like in eventBus, the codes in components B, C, and D are the same except for the difference in introducing subcomponents, so I will not go into details.

Effect Preview

Summarize

A total of 7 Vue component communication methods are mentioned above. The types of communication they can perform are shown in the following figure:

  • props/$emit: It can realize two-way communication between parent and child components. It is generally our most commonly used choice in daily parent-child component communication.
  • v-slot: It can realize one-way communication between parent and child components (parent passes value to child). When implementing reusable components, passing DOM nodes, html and other content into components, and performing secondary processing of table values ​​in some component libraries, v-slot can be given priority.
  • $ refs/$ parent/ $ children/ $ root: can realize two-way communication between parent and child components, among which $root can realize one-way value transfer from the root component instance to the child components across levels. When the parent component does not pass a value or listen through v-on binding, the parent and child components can consider using these APIs if they want to obtain each other's properties or methods.
  • $attrs/$listeners: Enables cross-level two-way communication, allowing you to easily obtain incoming attributes and bound listeners, and conveniently pass them to lower-level subcomponents, which is very useful when building advanced components.
  • Provide/inject: It can realize cross-level one-way communication and lightly inject dependencies into descendant components. This is your best choice when implementing advanced components and creating component libraries.
  • eventBus: can realize global communication. When the project scale is not large, eventBus can be used to realize global event monitoring. However, eventBus should be used with caution to avoid global pollution and memory leaks.
  • Vuex: It can realize global communication and is the best practice for global state management of Vue projects. If the project is large and you want to centrally manage the global component status, then installing Vuex is the right choice!

The above is the detailed content of in-depth understanding of the seven communication methods of Vue components. For more information about Vue component communication methods, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:
  • The way Vue parent-child components communicate is like this
  • Do you understand the communication between non-parent-child components in Vue?
  • Detailed explanation of seven component communication methods of Vue3
  • Detailed explanation of four communication methods between Vue components
  • How much do you know about communication between Vue components

<<:  How to design a responsive web? Advantages and disadvantages of responsive web design

>>:  Spring Boot layered packaging Docker image practice and analysis (recommended)

Recommend

The MySQL version is lower than the one that does not support two timestamp type values.

MySQL error: Error code: 1293 Incorrect table def...

JavaScript implements div mouse drag effect

This article shares the specific code for JavaScr...

Various problems encountered in sending emails on Alibaba Cloud Centos6.X

Preface: I have newly installed an Alibaba cloud ...

Example of asynchronous file upload in html

Copy code The code is as follows: <form action...

Detailed explanation of performance monitoring of MySQL server using Prometheus and Grafana

Overview Prometheus is an open source service mon...

CSS3+Bezier curve to achieve scalable input search box effect

Without further ado, here are the renderings. The...

A brief discussion on ifnull() function similar to nvl() function in MySQL

IFNULL(expr1,expr2) If expr1 is not NULL, IFNULL(...

28 Famous Blog Redesign Examples

1. WebDesignerWall 2. Veerle's Blog 3. Tutori...

Five practical tips for web form design

1. Mobile selection of form text input: In the te...

Sample code for implementing multiple selection based on nested Table in ElementUI

Preface: I wrote this because I helped my friend ...

Optimization of data tables in MySQL database, analysis of foreign keys and usage of three paradigms

This article uses examples to illustrate the opti...

SQL implementation of LeetCode (197. Rising temperature)

[LeetCode] 197.Rising Temperature Given a Weather...

Explanation of Dockerfile instructions and basic structure

Using Dockerfile allows users to create custom im...

Implementation of 2D and 3D transformation in CSS3

CSS3 implements 2D plane transformation and visua...

How to implement the builder pattern in Javascript

Overview The builder pattern is a relatively simp...