Detailed explanation of various methods of Vue component communication

Detailed explanation of various methods of Vue component communication

When it comes to component communication, there are probably five types that are familiar to everyone:

1. From father to son

The parent component passes values ​​to the child component through custom attributes, and the child component receives them using props

2. From son to father

The parent component customizes the event on the child component tag, and the child component triggers the custom event through $emit and can pass parameters

3. Non-parent-child component value transfer

eventBus event bus:

Information can be published and subscribed through eventBus (creating an event bus that everyone can access)

insert image description here

4. vuex

Vuex is a state management mode developed specifically for Vue.js applications. It uses a centralized storage manager to manage the status of all components of the program and solve multi-component communication. However, it is mostly used in medium and large projects, and it will appear bloated in small projects.

5. Refs

By adding ref and ·$refs·, you can also easily get the child component and access the properties and methods of the child component. Regarding refs, I have also written a separate article with detailed usage, the usage of refs

In addition to the above 5, there are 5 less common component communication methods:

6. $children

In the parent component, $children returns a component collection. If you know the order of the child components, you can also use the subscript operation

insert image description here

7. $parent

In the child component this.$parent points to the parent component. The child component cannot directly modify the data in the parent component. You can use this.$parent to let the parent component modify it itself.

For example:

this.$parent.xxx=200

this.$parent.fn()

8. provide & inject

Appear in pairs : provide and inject appear in pairs

Function : Used by parent components to pass data to descendant components

Directions:

  • Provide in the parent component, returns the data to be passed to the subordinate
  • inject injects data into descendant components that need to use this data. (regardless of how deep the component hierarchy is)

insert image description here

9. $attrs

Used by parent components to pass data to grandchild components

10. $listeners

Used by grandchild components to pass data to parent components

insert image description here

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:
  • Detailed explanation of custom events of Vue components
  • Detailed explanation of value transfer between parent and child components in Vue3
  • Vue components dynamic components detailed explanation
  • Detailed explanation of the use of Vue image drag and drop zoom component
  • Detailed explanation of the use of router-view components in Vue
  • Detailed explanation of Vue components

<<:  Docker5 full-featured harbor warehouse construction process

>>:  Introduction to the use of data custom attributes in HTML and plug-in applications

Recommend

CSS shadow animation optimization tips

This technique comes from this article - How to a...

Bug of Chinese input garbled characters in flex program Firefox

Chinese characters cannot be input in lower versio...

Windows 2019 Activation Tutorial (Office2019)

A few days ago, I found that the official version...

MySQL query_cache_type parameter and usage details

The purpose of setting up MySQL query cache is: C...

Illustration-style website homepage design New trend in website design

You can see that their visual effects are very bea...

20 excellent foreign web page color matching cases sharing

This article collects 20 excellent web page color ...

Detailed explanation of MySQL 8.0 password expiration policy

Starting from MySQL 8.0.16, you can set a passwor...

How to use docker to build redis master-slave

1. Build a Docker environment 1. Create a Dockerf...

Detailed explanation of the functions of each port of Tomcat

From the tomcat configuration file, we can see th...

Various problems encountered by novices when installing mysql into docker

Preface Recently, my computer often takes a long ...

Two ways to manage volumes in Docker

In the previous article, I introduced the basic k...

Vue/react single page application back without refresh solution

Table of contents introduction Why bother? Commun...

Detailed explanation of html printing related operations and implementation

The principle is to call the window.print() metho...