What are the methods for passing data in vuejs

Transmission method: 1. The parent component uses props to transfer data to the child component; 2. The child component transfers data to the parent component through events; 3. Use routing to transfer data; 4. Use localStorage or sessionStorage to store data, and then Use getItem to obtain data; 5. Use Vuex to transfer data.

The operating environment of this tutorial: Windows 7 system, vue version 2.9.6, DELL G3 computer.

Component (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 the 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.

Subcomponent：

The subcomponent needs to get the logo from the parent component For the value of , you need to use props: ['logo']

Parent component：

##2. Child component passes value to parent component

Subcomponents mainly pass data to parent components through events.

Subcomponent:

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

Parent component

:

##getUser

Parameters in the method msg is the parameter passed from the subcomponent username

3 .Route passing value

When used, value is assigned in the created life cycle.

4. Pass localStorage or sessionStorageTo store data

##5 .Vuex

When the application is complex, it is recommended to use vuevuex recommended by the official website .

https://vuex.vuejs.org/zh-cn/getting-started.html

##Related Recommended: "

vue.js Tutorial

"

The above is the detailed content of What are the methods for passing data in vuejs. For more information, please follow other related articles on the PHP Chinese website!