Vuejs 頁面的區(qū)域化與組件封裝的實(shí)現(xiàn)
組件的好處
當(dāng)我用vue寫頁面的時候，大量的數(shù)據(jù)頁面渲染，引入組件簡化主頁面的代碼量，當(dāng)代碼區(qū)域塊代碼差不多相同時，組件封裝會更加簡化代碼。組件是Vue.js最強(qiáng)大的功能之一。
組件可以擴(kuò)展HTML元素，封裝可重用的代碼。在較高層面上，組件是自定義的元素，Vue.js的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生HTML元素的形式，以is特性擴(kuò)展。
我用一個讀書軟件的圖書列表例子：
圖書展示頁 大家可以想想用vue如何實(shí)現(xiàn)這個頁面的前端頁面實(shí)現(xiàn)，再來實(shí)現(xiàn)邏輯功能；
圖片顯示的 '推薦圖書' 和 '最新圖書' 的列表展示是一樣的，開始可以用重復(fù)的代碼把先寫好的 '推薦圖書' 的代碼復(fù)制一份就可以輕輕松松實(shí)現(xiàn) '最新圖書' 頁面
如果其他頁面也需要這個展示，或我想代碼更加簡潔一點(diǎn)，那么來組件如何封裝就派上場啦
簡要頁面：圖書列表展示頁 - 圖書列表組件
|- book.vue // 圖書展示頁面 |-- BookList.vue // 圖書列列表組件
基礎(chǔ)部分相信使用過vue的伙計都知道如何使用，我直接上代碼：
創(chuàng)建一個組件 - 注冊組件 - 使用組件
// 引入組件
import BookList from '../../components/bookList/BookList.vue';
// 注冊組件
components:{
BookList,
},
// 使用組件
<book-list></book-list>
vue2.0 規(guī)定引入組件建議使用駝峰命名，使用時用 - 分開，vue才更好識別
之前沒封封裝組件的代碼就不上傳了，直接上代碼：
圖書列表頁 - book.vue
|- book.vue - html 頁面
<template>
<div>
<h2>歡迎來到波波圖書館!</h2>
<!-- 推薦讀書 -->
<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>
<!-- 頭部 -->
<!--這個是頁面?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',//圖書對象數(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)用時加一個定時器
setTimeout(() => {
this.$refs.contTimer.countTime(60)
}, 20)
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue中keep-alive 實(shí)現(xiàn)后退不刷新并保持滾動位置
這篇文章主要介紹了Vue中keep-alive 實(shí)現(xiàn)后退不刷新并保持滾動位置的相關(guān)知識，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
這篇文章主要介紹了vue如何獲取配置代理文件中的api地址值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue導(dǎo)出excel和echart圖形分別在不同工作表的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了如何使用vue實(shí)現(xiàn)導(dǎo)出excel和echart圖形分別在不同工作表,文中有詳細(xì)的代碼示例供大家參考,對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-10-10
關(guān)于Nuxt的五種渲染模式的差異和使用場景全解析
這篇文章主要介紹了關(guān)于Nuxt的五種渲染模式的差異和使用場景全解析,在過去傳統(tǒng)開發(fā)中，頁面渲染任務(wù)是由服務(wù)端完成的,那么Nuxt是如何渲染的呢,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue背景圖片路徑問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue使用xlsx模塊實(shí)現(xiàn)讀寫Excel文檔內(nèi)容
在前端項目開發(fā)中,讀寫Excel文件的需求變得越來越常見,本文將詳細(xì)介紹如何在Vue項目中利用FileReader對象和xlsx模塊來讀取Excel文件的內(nèi)容,需要的可以參考下2024-03-03
Vue.js實(shí)戰(zhàn)之組件的進(jìn)階
組件（Component）是 Vue.js 最強(qiáng)大的功能之一，之前的文章都只是用到了基本的封裝功能，這次將介紹一些更強(qiáng)大的擴(kuò)展。這篇文章主要介紹了Vue.js實(shí)戰(zhàn)之組件進(jìn)階的相關(guān)資料，需要的朋友們可以參考借鑒，下面來一起看看吧。2017-04-04
這篇文章主要介紹了vue?如何配置eslint代碼檢查，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
在項目中會用到 Electron ， 一種最流行的框架，可使用Javascript構(gòu)建跨平臺的桌面應(yīng)用程序。在本文中，我們將研究如何通過 Vite 開發(fā) Vue 3 桌面項目，感興趣的可以了解一下2021-05-05
vue中input獲取光標(biāo)位置并追加內(nèi)容
這篇文章主要給大家介紹了關(guān)于vue中input獲取光標(biāo)位置并追加內(nèi)容的相關(guān)資料,vue通過當(dāng)前的光標(biāo)來進(jìn)行插值,從而需要去獲取光標(biāo)所在的位置,需要的朋友可以參考下2023-07-07