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)

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

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)
  

9. $attrs

Used by parent components to pass data to grandchild components

10. $listeners

Used by grandchild components to pass data to parent components

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!