Vuejs 頁面的區(qū)域化與組件封裝的實(shí)現(xiàn)
組件的好處
當(dāng)我用vue寫頁面的時(shí)候，大量的數(shù)據(jù)頁面渲染，引入組件簡化主頁面的代碼量，當(dāng)代碼區(qū)域塊代碼差不多相同時(shí)，組件封裝會(huì)更加簡化代碼。組件是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è)組件 - 注冊(cè)組件 - 使用組件
// 引入組件
import BookList from '../../components/bookList/BookList.vue';
// 注冊(cè)組件
components:{
BookList,
},
// 使用組件
<book-list></book-list>
vue2.0 規(guī)定引入組件建議使用駝峰命名，使用時(shí)用 - 分開，vue才更好識(shí)別
之前沒封封裝組件的代碼就不上傳了，直接上代碼：
圖書列表頁 - book.vue
|- book.vue - html 頁面
<template>
<div>
<h2>歡迎來到波波圖書館!</h2>
<!-- 推薦讀書 -->
<section class="box recommend-book">
<!-- 大家注意 :books 是BookList.vue組件里圖書對(duì)象數(shù)組 heading 是傳給組件的標(biāo)題 -->
<book-list :books="recommendArray" heading="推薦圖書"></book-list>
</section>
<!-- 最新圖書 -->
<section class="box update-book">
<!-- 大家注意 :books 是BookList.vue組件里圖書對(duì)象數(shù)組 heading 是傳給組件的標(biāo)題 -->
<book-list :books="updateBookArray" heading="最新圖書"></book-list>
</section>
</div>
</template>
我是模擬數(shù)據(jù)，開發(fā)過程中是用api接口拿數(shù)據(jù)的，其實(shí)都一樣，代碼有點(diǎn)多，原理都一樣，大家看一下也可以了解一下json的知識(shí)
|- 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)題 -->
<h3 class="heading">{{heading}}</h3>
<!-- 列表 -->
<article class="book-list">
<!-- 遍歷圖書數(shù)據(jù) -->
<li v-for="book in books">
<router-link :to="{ name:'BookDetail',params:{ id: book.id }}">
 <!-- 圖書圖片 -->
{{book.book_name}} <!-- 圖書名字 -->
</router-link>
</li>
</article>
</div>
</template>
|- 組件 - BookList.vue - html
<script>
export default({
// props 數(shù)據(jù)傳遞的意思
props:[
'heading',//標(biāo)題
'books',//圖書對(duì)象數(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)常會(huì)出現(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)
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue-cli提供的腳手架只是一個(gè)最基礎(chǔ)的，也可以說是Vue團(tuán)隊(duì)認(rèn)為的工程結(jié)構(gòu)的一種最佳實(shí)踐。這篇文章主要介紹了vue-cli的工程模板與構(gòu)建工具 ,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了用vscode開發(fā)vue應(yīng)用的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
Vue?2源碼解析ParseHTML函數(shù)HTML模板
這篇文章主要為大家介紹了Vue?2源碼解析ParseHTML函數(shù)HTML模板詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
微信、支付寶支付密碼時(shí)的密碼輸入框大家都很熟悉，本文主要介紹了vue3如何實(shí)現(xiàn)?6位支付密碼輸入框，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
如何修改element-ui日期下拉框datetimePicker的背景色樣式
這篇文章主要介紹了修改element-ui日期下拉框datetimePicker的背景色樣式的操作代碼,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
使用vue.js實(shí)現(xiàn)聯(lián)動(dòng)效果的示例代碼
本篇文章主要介紹了使用vue.js實(shí)現(xiàn)聯(lián)動(dòng)效果的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01
proxy代理不生效以及vue?config.js不生效解決方法
在開發(fā)Vue項(xiàng)目過程中,使用了Proxy代理進(jìn)行數(shù)據(jù)劫持,但是在實(shí)際運(yùn)行過程中發(fā)現(xiàn)代理并沒有生效,也就是說數(shù)據(jù)并沒有被劫持,這篇文章主要給大家介紹了關(guān)于proxy代理不生效以及vue?config.js不生效解決方法的相關(guān)資料,需要的朋友可以參考下2023-11-11
在 Vue 中,watch 屬性用于觀察和響應(yīng) Vue 實(shí)例上數(shù)據(jù)的變動(dòng),然而,默認(rèn)情況下,watch 確實(shí)不會(huì)觸發(fā)組件創(chuàng)建時(shí)的變動(dòng),這里有幾種方式可以處理或繞過這個(gè)問題,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了vue如何獲取配置代理文件中的api地址值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
今天小編就為大家分享一篇vue.js 子組件無法獲取父組件store值的解決方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11