How to pass data using vue

This time I will show you how to use vue to transfer data, and what are the precautions for using vue to transfer data. The following is a practical case, let's take a look.

Component is the most powerful feature of Vue.js. Components can encapsulate reusable code and realize component reuse by passing in different objects. However, component value transfer becomes a problem that needs to be solved.

1. Parent component passes value to child component

The scope of a component instance is isolated. This means that the parent component's data cannot be referenced directly within the child component's template. To make the child component use the data of the parent component, we need to pass the props option of the child component.

Sub component:

If a sub component needs to get the value of the logo from the parent component, it needs to use props: ['logo']

Parent component:

2. Child component passes value to parent component

Subcomponents mainly pass data to parent components through

events.

Subcomponent:

where transferUser is a custom event, and this.username will be passed to the parent component through this event.

Parent component:

The parameter msg in the getUser method is the parameter username passed from the child component

3.RoutingPassing value

##When used, in

life cycle

created assignment.

4. Store data through localStorage or sessionStorage

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to operate JS to obtain the city and geographical location of the user

How to use webpack modular management and Packaging tool

The above is the detailed content of How to pass data using vue. For more information, please follow other related articles on the PHP Chinese website!