헤더 컴포넌트 사용 방법

이번에는 header 컴포넌트 사용법과 header 컴포넌트 사용 시 주의사항에 대해 알려드리겠습니다.

1. 헤더 구성요소 개발 시 데이터 전송

1. App.vue는 구성요소

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

2를 App.vue

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

에 등록합니다. 설명: :sell= "sellerObj", 여기서 Sell은 매개변수를 전달하는 함수와 마찬가지로 형식 매개변수로 처리되며, SellerObj는 실제 매개변수입니다. 그러면 상위 구성요소의 실제 매개변수는 하위 구성요소에 어떻게 전달되며, 어떤 방법을 통해 전달되나요? 상위 구성 요소는 하위 구성 요소에 데이터를 전달합니다.

상위 구성 요소에서 SellerObj는 데이터로 내보내야 합니다. 하위 구성 요소는 props를 통해 상위 구성 요소로부터 데이터를 얻고

데이터 유형

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

을 지정합니다. 요약:

하위 컴포넌트는 props에 속성을 생성하여 상위 컴포넌트에서 전달된 값을 받습니다

1. 상위 컴포넌트에 하위 컴포넌트를 등록합니다

2. 하위 컴포넌트 props에서 생성된 속성을 하위 컴포넌트 태그에 추가

3. Assign 속성의 하위 구성 요소에 전달되어야 하는 값

4. 5. 데이터 호출

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

   세부 사항:

support 데이터 바인딩 시 v-if ='sell.supports' 추가

이유: 비어 있는 것은 axios를 통해 데이터를 가져오기 전에 상위 구성 요소에서 생성됩니다. SellerObj 객체는 먼저 하위 구성 요소에 전달됩니다. 처음에 데이터가 전송되지 않으면 v-if를 사용하여 데이터를 수신할 수 없으면 불완전한 오류가 보고됩니다. 구문 분석되지 않으며 오류가 보고되지 않습니다.

2. 헤더 컴포넌트 팝업 레이어(세부사항)

1. 팝업 마스크 레이어

(1) 상태를 설정하고 상태를 판단하여 표시 및 숨기기를 제어합니다

<p class="logo">
 <img :src="sell.avatar" alt="" width=&#39;64&#39; height=&#39;64&#39;/>
</p>
<span class="name">{{sell.name}}</span>
<p class="description">
  {{sell.description + '/' + sell.deliveryTime + '分钟送达'}}
</p>

data (){
 return {
 detailShow:false
 }
}

(2) 메서드 메소드를 통해 클릭 이벤트를 바인딩합니다. 메소드는 상태를 변경하고 보이는 효과를 제어합니다

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

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

2. Star rating

(1) 별 크기 유형을 제어하는 ​​클래스 바인딩

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

// 利用 computed 属性
<p class="star" :class="starSizeType"></p>

(2) 별의 수를 탐색합니다.

코드 복사

코드는 다음과 같습니다.

< /span>(3) 각 별의 상태를 제어하는 ​​상수 정의

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

(4) 계산을 통해 각 스팬의 유형을 결정

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

(5) 동적으로 클래스를 바인딩하여 스팬에 클래스 이름을 추가

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;i++){ // 遍历全星的span
 spanClassList.push(CLS_ON)
 }
 if(HashalfNum){ // 如果有半星 加类名
 spanClassList.push(CLS_HALF)
 }
 while(spanClassList.length<LENGTH){// 判断 是否有空星 及个数
 spanClassList.push(CLS_OFF)
 }
  return spanClassList;   
 }
}

이 기사의 사례를 읽으신 후 마스터하셨다고 생각합니다. 더 흥미로운 방법을 알고 싶다면 PHP 중국어 웹사이트의 다른 관련 기사를 주목해 보세요!

추천 자료:

WeChat 애플릿 개발 이미지 압축 기능

js 동적 연산 양식

JS에서 Object 객체의 프로토타입을 사용하는 방법

360 브라우저 호환 모드 페이지 방법 불완전한 디스플레이 처리

위 내용은 헤더 컴포넌트 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!