search

How to use header component

Mar 23, 2018 am 10:39 AM
headerInstructionscomponents

This time I will bring you the method of using the header component, what are the precautions when using the header component, the following is a practical case, let's take a look.

1. Data transfer in header component development

1. App.vue introduces components

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

2. Registers components in App.vue

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

3. Use components

<v-header></v-header>

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 passes props from the parent component Get data from, and specify the data type

export default {
 props:{ // 子组件获取 父组件 数据
 sell:{
  type:Object // 传递的类型 
 }
 }
 }

Summary:

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

  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. Calling data

<p>
 <img  src="/static/imghwm/default1.png" data-src="sell.avatar" class="lazy" alt="How to use header component" >
</p>
<span>{{sell.name}}</span>
<p>
  {{sell.description + '/' + sell.deliveryTime + '分钟送达'}}
</p>

Details:

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

Reason: 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 transmitted at first, an underfined error will be reported. With v-if, 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

data (){
 return {
 detailShow:false
 }
}
<p></p>

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

<p></p>

  

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

2. Star rating

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

// 利用 computed 属性
<p></p>
computed: {
 starSizeType() { // 返回 星级的大小类型 48/36/24
  return 'star-' + this.size;
 }
}

(2) Traverse the number of stars

Copy code The code is as follows:


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

// 类名用变量存起来
const LENGTH = 5 // 星星长度
const CLS_ON = 'on' // 全星
const CLS_HALF = 'half' // 半星
const CLS_OFF = 'off'// 空星

(4) Determine the type of each span through calculation

itemClasses () { // 返回一个数组为每个span 的类名 (遍历)
  let spanClassList=[];
  // 利用 实参评分来判断 有几颗全星,半星,空星
 let scores=( Math.floor(this.score * 2) ) / 2 
 let intNum= Math.floor(scores); // 全星个数 
 let HashalfNum= scores % 1 !== 0  // 半星
 for(var i=0;i<intnum><p style="text-align: left;">(5) By dynamically binding class Add a class name to span </p>
<pre class="brush:php;toolbar:false"><p>
 <span></span>
</p>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

WeChat applet development of image compression function

js dynamic operation form

How to use the prototype of the Object object in JS

How to deal with incomplete page display in 360 browser compatibility mode

The above is the detailed content of How to use header component. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat Commands and How to Use Them
1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft