집 > 기사 > 웹 프론트엔드 > Vue에서 헤더 구성요소를 통해 개발하는 방법(자세한 튜토리얼)

Vue에서 헤더 구성요소를 통해 개발하는 방법(자세한 튜토리얼)

亚连원래의: 2018-06-09 13:52:312079검색

이 글에서는 주로 Vue 헤더 컴포넌트 개발에 대한 자세한 설명을 소개하고, 참고자료를 제공하겠습니다.

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

1. App.vue는 구성요소

import header from &#39;./components/header/header&#39;

2를 App.vue

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

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

상위 구성 요소에서는 SellerObj를 데이터로 내보내야 합니다. 하위 구성 요소는 props를 통해 상위 구성 요소에서 데이터를 가져오고 데이터 유형을 지정합니다.

하위 구성 요소는 상위 구성 요소를 받기 위해 props에 속성을 생성합니다. 전달된 값

하위 구성요소에 전달되어야 하는 값
```
<v-header :sell="sellerObj"></v-header>
```
세부정보:

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

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

1. 팝업 마스크 레이어

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

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

<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 + &#39;/&#39; + sell.deliveryTime + &#39;分钟送达&#39;}}
</p>

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

data (){
 return {
 detailShow:false
 }
}

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

2. Star rating

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

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

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

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

코드 복사

코드는 다음과 같습니다.

f34e4e128b5ca5b05f1e21dad05fe698494c0df226525cc046cf4930a65bbd6f

(3) 각 별의 상태를 제어하는 상수 정의

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

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

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

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

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

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

Vue에서 헤더 구성요소를 통해 개발하는 방법(자세한 튜토리얼)

관련 기사