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

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

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를 통해 상위 구성 요소에서 데이터를 가져오고 데이터 유형을 지정합니다.

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

상위 구성 요소에 하위 구성 요소를 등록
하위 구성 요소 props에서 생성된 속성을 하위 구성 요소 태그에 추가합니다

3. 하위 구성요소에 전달되어야 하는 값
5. 데이터 호출

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

   로그인 후 복사

   세부정보:

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

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

(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>

(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) 별의 수를 탐색합니다.

코드는 다음과 같습니다.

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

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

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