Detailed explanation of data sharing between Vue components

1. In project development, the most common relationships between components are divided into the following two types:

1. Father-son relationship

2. Brotherly Relationship

1.1 Data sharing between parent and child components

Data sharing between parent and child components is divided into:

1. Parent->Child Shared Data

Subcomponents:

Parent component:

2. Child->Parent Shared Data

Child components share data with parent components using custom events. The sample code is as follows

Subcomponents:

Parent component:

The page displays the results:

1.2 Data sharing between sibling components

In vue2.x, the solution for sharing data between sibling components is EventBus

EventBus usage:

• Create the eventBus.js module and share a Vue instance object
• On the data sender, call bus.$emit('event name', data to be sent) method to trigger a custom event
• On the data receiving side, call bus.$on('event name', event handling function) method to register a custom event

Example:

1. Create the eventBus.js module and share a Vue instance object

2. On the data sender, call bus.$emit('event name', data to be sent) method to trigger a custom event

3. On the data receiver side, call bus.$on('event name', event processing function) method to register a custom event

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!