Vuejs 페이지 의 지역 화 와 구성 요소 패키지 구현

7728 단어 Vue구성 요소포장 하 다지역 화
구성 요소 의 장점
내 가 vue 로 페이지 를 쓸 때 대량의 데이터 페이지 를 렌 더 링 하고 구성 요 소 를 도입 하여 홈 페이지 의 코드 량 을 간소화 합 니 다.코드 영역 블록 코드 차이 가 많 지 않 을 때 구성 요소 패 키 징 은 코드 를 더욱 간소화 합 니 다.구성 요 소 는 Vue.js 의 가장 강력 한 기능 중의 하나 입 니 다.
구성 요 소 는 HTML 요 소 를 확장 할 수 있 고 재 활용 가능 한 코드 를 패키지 할 수 있 습 니 다.높 은 차원 에서 구성 요 소 는 사용자 정의 요소 이 고 Vue.js 의 컴 파일 러 는 특수 기능 을 추가 합 니 다.어떤 경우 에는 구성 요소 도 원생 HTML 요소 의 형식 으로 is 특성 으로 확장 할 수 있 습 니 다.
나 는 독서 소프트웨어 의 도서 목록 예 를 들 었 다.
도서 전시 페이지 는 vue 로 이 페이지 의 전단 페이지 를 어떻게 실현 하 는 지 생각해 보고 논리 적 기능 을 실현 할 수 있다.
사진 에 표 시 된'추천 도서'와'최신 도서'의 목록 전 시 는 같다.먼저 쓴'추천 도서'의 코드 를 중복 코드 로 복사 하면'최신 도서'페이지 를 가볍게 풀 수 있다.

다른 페이지 에 도 이 전시 가 필요 하거나 코드 가 좀 더 간결 하 다 고 생각 합 니 다.그러면 구성 요 소 를 어떻게 포장 하 는 지 보 내 드 리 겠 습 니 다.
요약 페이지:도서 목록 전시 페이지-도서 목록 구성 요소

|- book.vue //       
 |-- BookList.vue //
기본 부분 에 서 는 vue 를 사용 한 동료 들 이 어떻게 사용 하 는 지 알 고 있다 고 믿 습 니 다.저 는 코드 를 직접 올 리 겠 습 니 다.
구성 요소 만 들 기-등록 구성 요소-구성 요소 사용

//     
import BookList from '../../components/bookList/BookList.vue';

//     
components:{
 BookList,
},

//     
<book-list></book-list>
vue 2.0 규정 도입 구성 요 소 는 낙타 봉 이름 을 사용 하 는 것 을 권장 합 니 다.사용 시-분리,vue 를 사용 해 야 식별 할 수 있 습 니 다.
이전에 패 키 징 구성 요소 의 코드 를 봉 하지 않 고 업로드 하지 않 고 코드 를 직접 올 립 니 다.
도서 목록 페이지-book.vue

|- book.vue - html   
 <template> 
  <div>
  <h2>         !</h2>
     
  <!--      -->
  <section class="box recommend-book">
   <!--      :books  BookList.vue          heading          -->
   <book-list :books="recommendArray" heading="    "></book-list>
  </section>

  <!--      -->
  <section class="box update-book">
   <!--      :books  BookList.vue          heading          -->
   <book-list :books="updateBookArray" heading="    "></book-list>
  </section>

  </div>
 </template>
저 는 아 날로 그 데이터 입 니 다.개발 과정 에서 api 인터페이스 로 데 이 터 를 가 져 왔 습 니 다.사실은 똑 같 습 니 다.코드 가 좀 많 고 원리 가 똑 같 습 니 다.여러분 도 제 이 슨 의 지식 을 알 아 보 실 수 있 습 니 다.

|- book.vue - js 
<script>
 import BookList from '../../components/bookList/BookList.vue';
 export default({
  data(){
    return {

    //     
    recommendArray:[
     {
      id:1,
      img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
      book_name:'Vuejs-1',
      book_author:'liangfengbo',
     },

     {
      id:2,
      img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
      book_name:'Vuejs-2',
      book_author:'liangfengbo',

     },

     {
      id:3,
      img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
      book_name:'Vuejs-3',
      book_author:'liangfengbo',

     },
    ],

    //     
    updateBookArray:[
     {
      id:5,
      img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
      book_name:'Vuejs-5',
      book_author:'liangfengbo',

     },

     {
      id:6,
      img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
      book_name:'Vuejs-6',
      book_author:'liangfengbo',

     },
     {
      id:7,
      img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
      book_name:'Vuejs-7',
      book_author:'liangfengbo',

     },
    ],
   }
  },

  //     
  components:{
   BookList,
  },

  methods : {
     
  },
 })
</script>



|- book.vue - css
<style>
 *{
  margin: 0;
  padding: 0;
 }
 li{
  list-style:none;
 }
  .box{
  height: auto;
  border-bottom: 1px solid #efefef;
  margin: 10px 0;
  padding: 5px 0;
 }
</style>
구성 요소-BookList.vue

|-    - BookList.vue - html
<template>
 <div>
  <!--    -->
  <!--           -->
  <h3 class="heading">{{heading}}</h3>
  <!--    -->
  <article class="book-list">
   <!--        -->
   <li v-for="book in books">

    <router-link :to="{ name:'BookDetail',params:{ id: book.id }}">
     ![](book.img_url) <!--      -->
     {{book.book_name}} <!--      -->
    </router-link>

   </li>   
   </article>
 </div>
</template>
|구성 요소-BookList.vue-html

<script>
 export default({
  // props        
  props:[
   'heading',//  
   'books',//      
  ],
  data(){
   return {
  
   }
  },
  methods : {
     
  },
 })
</script>
|구성 요소-BookList.vue-css

<style scoped>
  /*    */
 .book-list {
  width:100%;
  height:128px;
  display: flex;
  justify-content: space-around;
 }
 .heading {
  border-left: 4px solid #333;
  margin: 10px 0;
  padding-left: 4px;
 }
 .book-list li {
  width:80px;
  height: 100%;
  flex:1;
  margin:0 10px;

 }

 .book-list li img{
  height: 100px;
  width: 100%;
 }
 .book-list li a{
  text-align: center;
  font-size: 12px;
  text-decoration: none;
  display: inline-block;
  width: 100%;
 }
</style>
모든 코드 가 여기에 있 습 니 다.여러분 은 세 심하게 발견 할 수 있 습 니 다.구성 요소 패 키 징 은 사실 우리 가 전에 자 바스 크 립 트 함수 패 키 징 과 같이 파 라 메 터 를 전달 하고 파 라 메 터 를 받 으 며 렌 더 링 데 이 터 를 반복 적 으로 이용 할 수 있 습 니 다.여러분 은 직접 실행 해서 설명 할 수 있 습 니 다.
작은 건어물
부모 구성 요소 호출 하위 구성 요소 방법 은:
하위 구성 요소 에 이름 을 쓰 십시오:

<start-set-timeout seconds=60 ref="contTimer"></start-set-timeout>
호출 방법:this.$refs.contTimer.countTime(60)그러나.
데이터 지연 으로 인해 하위 구성 요 소 를 호출 하 는 이벤트 가 자주 발생 합 니 다.undefined 가 발생 합 니 다.TypeError: Cannot read property 'countTime' of undefined
해결책 은

//          
setTimeout(() => {
 this.$refs.contTimer.countTime(60)
}, 20)
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
react-native 로그 인 기능 을 완전 하 게 실현 하 는 예제 코드
js 플러그 인 으로 패키지 하 는 절차 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage