이번에는 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에 속성을 생성하여 상위 컴포넌트에서 전달된 값을 받습니다
export default { props:{ // 子组件获取 父组件 数据 sell:{ type:Object // 传递的类型 } } }세부 사항:
2. 헤더 컴포넌트 팝업 레이어(세부사항)
1. 팝업 마스크 레이어
(1) 상태를 설정하고 상태를 판단하여 표시 및 숨기기를 제어합니다<p class="logo"> <img :src="sell.avatar" alt="" width='64' height='64'/> </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에서 Object 객체의 프로토타입을 사용하는 방법
360 브라우저 호환 모드 페이지 방법 불완전한 디스플레이 처리
위 내용은 헤더 컴포넌트 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!