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

This article will explain in detail how vuejs transmits data for everyone. Xiaobian thinks it is quite practical, so share it with you for reference. I hope you can gain something after reading this article.

Transfer method: 1. Parent component transfers data to child component by props;2. Child component transfers data to parent component by event;3. Data transfer by route;4. Data is stored by localStorage or sessionStorage, and then getItem is used to obtain data;5. Data is transferred by Vuex.

This tutorial operating environment: Windows 7 system, vue2.9.6 version, DELL G3 computer.

Component is the most powerful feature of Vue.js. Components can encapsulate reusable code and reuse components by passing different objects, but component value passing becomes a problem to be solved.

1. Parent component passes values to child component

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

Subassembly:

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

Parent component:

2. Child component passes value to parent component

Child components pass data to parent components primarily through events.

Subassembly:

where transferUser is a custom event that this.username will pass to the parent component.

Parent component:

The parameter msg in the getUser method is the parameter username passed from the subcomponent

3. routing value

When used, assigned during lifecycle created.

4. Store data via localStorage or sessionStorage

5.Vuex

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

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

About "vuejs how to transfer data" this article is shared here, I hope the above content can be of some help to everyone, so that you can learn more knowledge, if you think the article is good, please share it to let more people see.

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.