Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "how to achieve data sharing between Vue components". Many people will encounter this dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. In project development, the most common relationships between components are as follows:

1. Father-son relationship

two。 Brotherly relationship

1.1 data sharing between parent and child components

Data sharing between parent and child components is divided into:

1. Parent-> child sharing data

Subcomponents:

Parent component:

two。 Children-> parents share data

The child component shares data with the parent component 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 data sharing between sibling components is EventBus

How to use EventBus:

Create an eventBus.js module and share an instance object of Vue to the outside

At the data sender, the bus.$emit ('event name', data to be sent) method is called to trigger a custom event

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

Example:

1. Create an eventBus.js module and share an instance object of Vue to the outside

two。 At the data sender, the bus.$emit ('event name', data to be sent) method is called to trigger a custom event

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

This is the end of the content of "how to achieve data sharing between Vue components". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.