如何實(shí)現(xiàn)Vuejs頁面的區(qū)域化與組件封裝

這篇文章主要介紹如何實(shí)現(xiàn)Vuejs頁面的區(qū)域化與組件封裝，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

發(fā)展壯大離不開廣大客戶長期以來的信賴與支持，我們將始終秉承“誠信為本、服務(wù)至上”的服務(wù)理念，堅(jiān)持“二合一”的優(yōu)良服務(wù)模式，真誠服務(wù)每家企業(yè)，認(rèn)真做好每個(gè)細(xì)節(jié)，不斷完善自我，成就企業(yè)，實(shí)現(xiàn)共贏。行業(yè)涉及成都純水機(jī)等，在重慶網(wǎng)站建設(shè)公司、營銷型網(wǎng)站、WAP手機(jī)網(wǎng)站、VI設(shè)計(jì)、軟件開發(fā)等項(xiàng)目上具有豐富的設(shè)計(jì)經(jīng)驗(yàn)。

組件的好處

當(dāng)我用vue寫頁面的時(shí)候，大量的數(shù)據(jù)頁面渲染，引入組件簡化主頁面的代碼量，當(dāng)代碼區(qū)域塊代碼差不多相同時(shí)，組件封裝會更加簡化代碼。組件是Vue.js最強(qiáng)大的功能之一。

組件可以擴(kuò)展HTML元素，封裝可重用的代碼。在較高層面上，組件是自定義的元素，Vue.js的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生HTML元素的形式，以is特性擴(kuò)展。

我用一個(gè)讀書軟件的圖書列表例子：

圖書展示頁 大家可以想想用vue如何實(shí)現(xiàn)這個(gè)頁面的前端頁面實(shí)現(xiàn)，再來實(shí)現(xiàn)邏輯功能；

圖片顯示的 '推薦圖書' 和 '最新圖書' 的列表展示是一樣的，開始可以用重復(fù)的代碼把先寫好的 '推薦圖書' 的代碼復(fù)制一份就可以輕輕松松實(shí)現(xiàn) '最新圖書' 頁面

如果其他頁面也需要這個(gè)展示，或我想代碼更加簡潔一點(diǎn)，那么來組件如何封裝就派上場啦

簡要頁面：圖書列表展示頁 - 圖書列表組件

|- book.vue // 圖書展示頁面
 |-- BookList.vue // 圖書列列表組件

基礎(chǔ)部分相信使用過vue的伙計(jì)都知道如何使用，我直接上代碼：

創(chuàng)建一個(gè)組件 - 注冊組件 - 使用組件

// 引入組件
import BookList from '../../components/bookList/BookList.vue';

// 注冊組件
components:{
 BookList,
},

// 使用組件
<book-list></book-list>

vue2.0 規(guī)定引入組件建議使用駝峰命名，使用時(shí)用 - 分開，vue才更好識別

之前沒封封裝組件的代碼就不上傳了，直接上代碼：

圖書列表頁 - book.vue

|- book.vue - html 頁面
 <template> 
  <div>
  <h3>歡迎來到波波圖書館!</h3>
     
  <!-- 推薦讀書 -->
  <section class="box recommend-book">
   <!-- 大家注意 :books 是BookList.vue組件里圖書對象數(shù)組 heading 是傳給組件的標(biāo)題 -->
   <book-list :books="recommendArray" heading="推薦圖書"></book-list>
  </section>

  <!-- 最新圖書 -->
  <section class="box update-book">
   <!-- 大家注意 :books 是BookList.vue組件里圖書對象數(shù)組 heading 是傳給組件的標(biāo)題 -->
   <book-list :books="updateBookArray" heading="最新圖書"></book-list>
  </section>

  </div>
 </template>

我是模擬數(shù)據(jù)，開發(fā)過程中是用api接口拿數(shù)據(jù)的，其實(shí)都一樣，代碼有點(diǎn)多，原理都一樣，大家看一下也可以了解一下json的知識

|- 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>
  <!-- 頭部 -->
  <!--這個(gè)是頁面?zhèn)鱽淼臉?biāo)題 -->
  <h4 class="heading">{{heading}}</h4>
  <!-- 列表 -->
  <article class="book-list">
   <!-- 遍歷圖書數(shù)據(jù) -->
   <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 數(shù)據(jù)傳遞的意思
  props:[
   'heading',//標(biāo)題
   'books',//圖書對象數(shù)組
  ],
  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>

全部的代碼就在這里啦，大家可以細(xì)心發(fā)現(xiàn)，組件封裝，其實(shí)就向我們之前JavaScript函數(shù)封裝一樣，傳遞參數(shù)，接收參數(shù)，渲染數(shù)據(jù)，重復(fù)利用，大家可以直接復(fù)制代碼運(yùn)行看一下，注釋有解釋啦。

小干貨

父組件 調(diào)用 子組件 方法為 ：

在子組件上寫上名字 如：

<start-set-timeout seconds=60 ref="contTimer"></start-set-timeout>

調(diào)用方法：this.$refs.contTimer.countTime(60)

但是

因?yàn)橛袛?shù)據(jù)的延遲 經(jīng)常會出現(xiàn)調(diào)用子組件的事件出現(xiàn)undefined的事情：

TypeError: Cannot read property 'countTime' of undefined

解決方法是

// 調(diào)用時(shí)加一個(gè)定時(shí)器
setTimeout(() => {
 this.$refs.contTimer.countTime(60)
}, 20)

以上是“如何實(shí)現(xiàn)Vuejs頁面的區(qū)域化與組件封裝”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站題目：如何實(shí)現(xiàn)Vuejs頁面的區(qū)域化與組件封裝
文章轉(zhuǎn)載：http://muchs.cn/article44/gpgjhe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、服務(wù)器托管、企業(yè)建站、、網(wǎng)站內(nèi)鏈、標(biāo)簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)