How to develop through the header component in Vue (detailed tutorial)

This article mainly introduces the detailed explanation of Vue header component development. Now I will share it with you and give you a reference.

1. Data transfer in header component development

1. App.vue introduces components

2. Registers components in App.vue

3. Use components

Explanation: :sell="sellerObj", here it is treated as a formal parameter just like a function passing parameters, sellerObj is the actual parameter, then the parent component actual parameter How is it passed to the child component, and through what method

4. Parent component passes data to the child component

In the parent component, sellerObj needs to be exported as data, and the child component receives it from the parent component through props Obtain data from and specify the data type

Summary:

1. The child component creates a property in props to receive the value passed by the parent component

2. Register the subcomponent in the parent component

3. Add the properties created in the subcomponent props to the subcomponent tag

4. Assign the value that needs to be passed to the subcomponent to the attribute

5. Call data

Details:

support binding Add v-if ='sell.supports'

Reason for data: Before we get the data through axios, we create an empty object sellerObj in the parent component and pass it to the child component first. If no data is sent at first, An underfined error will be reported, and v-if is added. If the data cannot be received, it will not be parsed, and no error will be reported.

2. Header component pop-up layer (details)

1. Pop-up mask layer

(1) Set one Status, determine the status to control the display and hiding

(2) Bind the click event, change the status through the methods method, and control the visible and hidden effect

2. Star rating

(1) Bind class to control the type of star size

(2) Traverse the number of stars

Copy code The code is as follows:

(3) Define constants to control the status of each star

(4) Determine the type of each span through calculation

(5) By dynamically binding class Add a class name to span

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

react project development

Using vue to implement secondary route setting method

Use mint-ui to achieve the three-level linkage effect of provinces and municipalities

The above is the detailed content of How to develop through the header component in Vue (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!