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

This article focuses on "how to understand the communication of vue front-end development level nested components", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to understand the communication of nested components in the vue front-end development level.

Catalogue

Preface

Example

Summary

Preface

Between vue parent and child components, it is easy to pass the value of the parent component to the child component through props. If a component is nested with many layers, the degree between each layer needs to be passed with props, which is troublesome and difficult to maintain.

Example

[example] component B is used in component A, component C is used in component B, and component C needs to use the data text of component An and the method getmethod of component A. The A component code is as follows:

This is component A.

Import comB from'@ / view/comB.vue' export default {name: 'comA', components: {' v combination: comB}, data () {return {msg:'I am the data in component A'}}, provide: function () {/ / inject subcomponent properties and methods return {text: this.msg GetMethod: function () {console.log ('execute getMethod method in root component')}

Use the keyword provide to expose data and methods to subcomponents

Component B is a subcomponent of component An and the parent component of component C. the code is as follows

This is component B.

Import comC from'@ / view/comC.vue' export default {name: 'comB', components: {' v compose: comC}}

C component is the grandchild of A component. C component needs to use the data and methods of A component. The code is as follows:

This is the C component

{{text}} call the parent component method export default {name: 'comC', inject: [' text', 'getMethod'] / / text and getMethod is the name provided by provide}

The inject keyword is used here to receive the information exposed by the A component, and it is important to note here that the received name in inject: [] must be exactly the same as the name provided by provide.

Run, and the interface is shown in the following figure

Summary

Multi-level components nested communication, vue through the provide & inject two keywords to complete the parent component directly to the descendant component value, it is very convenient to use. There is a problem that there is a strong coupling between the child component and the parent component, which is not recommended as a last resort.

At this point, I believe you have a deeper understanding of "how to understand the communication of nested components in the vue front-end development level". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.