Detailed description of Vue header component development and vueheader component development

Detailed description of Vue header component development and vueheader component development

I. Data Transmission in header component development

1. App. vue introduces components

import header from './components/header/header'

2. Register components in App. vue

 export default {   components:{     v-header:header   } }

3. Use Components

<v-header :sell="sellerObj"></v-header>

Explanation: callback = "sellerObj". Here, we use callback as a form parameter like a function parameter. sellerObj is a real parameter. How does the real parameter of the parent component pass to the child component?

4. The parent component transmits data to the child component.

In the parent component, sellerObj needs to be exported as data. The child component obtains data from the parent component through props and specifies the data type.

Export default {props: {// obtain the data of the parent component from the child component: {type: Object // transfer type }}}

Summary:

1. The child component creates an attribute in props to receive the value passed by the parent component.
2. Add parent component in parent component
3. Add the attributes created in the child component props to the child component tag.
4. Assign the value to be passed to the sub-component to this attribute.

5. Call data

<Div class = "logo">  </div> <span class =" name ">{{ detail. name }}</span> <div class = "description" >{{ detail. description + '/' + response. deliveryTime + 'minute delivery' }}</div>

Details:

Add v-if = 'prop. ororts 'to support data binding'

Reason: An empty object sellerObj is created in the parent component before we obtain data through axios. The sellerObj is first transmitted to the child component. if no data is transferred, an error underfined is returned, if the data is not accepted, it will not be parsed, and no error will be reported.

Ii. header component pop-up layer (details)

1. The mask layer is displayed.

(1) set a status and determine whether the status control is hidden.

data (){ return { detailShow:false }}

<div v-if="detailShow" class="detail"></div>

(2) bind a click event and use the methods method to change the status to control the explicit/hidden effect.

<div class="bulletin-wrapper" @click="showDetails()" ></div><div class="detail-close" v-if="sell.supports">  <i class="icon-close" @click="hideDetail()"></i></div>

methods:{ showDetails () {  this.detailShow=true }, hideDetail () { this.detailShow=false }}

2. Star Rating

(1) bind a class to control the type of star size

// Use the computed attribute <div class = "star": class = "starSizeType"> </div>

Computed: {starSizeType () {// returns the star size type 48/36/24 return 'star-'+ this. size ;}}

(2) number of stars traversed

Copy codeThe Code is as follows:
<Span v-for = "itemClass in itemClasses": class = "itemClass" class = "star-item" track-by = "$ index"> </span>

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

// Class name saved with variable const LENGTH = 5 // star LENGTH const CLS_ON = 'on' // whole star const CLS_HALF = 'half' // half star const CLS_OFF = 'off' // empty star

(4) determine the type of each span through calculation

ItemClasses () {// returns an array of class names for each span (traversal) let spanClassList = []; // uses Real-Time Parameter scores to determine how many full stars and half stars exist, empty star let scores = (Math. floor (this. score * 2)/2 let intNum = Math. floor (scores); // Number of all stars let HashalfNum = scores % 1! = 0 // half star for (var I = 0; I <intNum; I ++) {// traverse the span spanClassList of the whole star. push (CLS_ON)} if (HashalfNum) {// if there is a half star plus class name spanClassList. push (CLS_HALF)} while (spanClassList. length <LENGTH) {// determines whether there are empty stars and the number of spanClassList. push (CLS_OFF)} return spanClassList ;}}

(5) Add a class name to span by dynamically binding the class

<div class="star" :class="starSizeType"> <span v-for="itemClass in itemClasses" :class="itemClass" class="star-item" track-by="$index"></span></div>

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.