組件的好處
當(dāng)我用vue寫頁(yè)面的時(shí)候，大量的數(shù)據(jù)頁(yè)面渲染，引入組件簡(jiǎn)化主頁(yè)面的代碼量，當(dāng)代碼區(qū)域塊代碼差不多相同時(shí)，組件封裝會(huì)更加簡(jiǎn)化代碼。組件是Vue.js最強(qiáng)大的功能之一。
組件可以擴(kuò)展HTML元素，封裝可重用的代碼。在較高層面上，組件是自定義的元素，Vue.js的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生HTML元素的形式，以is特性擴(kuò)展。
我用一個(gè)讀書軟件的圖書列表例子：
圖書展示頁(yè) 大家可以想想用vue如何實(shí)現(xiàn)這個(gè)頁(yè)面的前端頁(yè)面實(shí)現(xiàn)，再來(lái)實(shí)現(xiàn)邏輯功能；
圖片顯示的 '推薦圖書' 和 '最新圖書' 的列表展示是一樣的，開(kāi)始可以用重復(fù)的代碼把先寫好的 '推薦圖書' 的代碼復(fù)制一份就可以輕輕松松實(shí)現(xiàn) '最新圖書' 頁(yè)面
image.png
如果其他頁(yè)面也需要這個(gè)展示，或我想代碼更加簡(jiǎn)潔一點(diǎn)，那么來(lái)組件如何封裝就派上場(chǎng)啦
簡(jiǎn)要頁(yè)面：圖書列表展示頁(yè) - 圖書列表組件
|- book.vue // 圖書展示頁(yè)面
|-- BookList.vue // 圖書列列表組件
基礎(chǔ)部分相信使用過(guò)vue的伙計(jì)都知道如何使用，我直接上代碼：
創(chuàng)建一個(gè)組件 - 注冊(cè)組件 - 使用組件
// 引入組件
import BookList from '../../components/bookList/BookList.vue';
// 注冊(cè)組件
components:{
BookList,
},
// 使用組件
<book-list></book-list>
vue2.0 規(guī)定引入組件建議使用駝峰命名，使用時(shí)用 - 分開(kāi)，vue才更好識(shí)別
之前沒(méi)封封裝組件的代碼就不上傳了，直接上代碼：
圖書列表頁(yè) - book.vue
|- book.vue - html 頁(yè)面
<template>
<div>
<h2>歡迎來(lái)到波波圖書館!</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ù)，開(kāi)發(fā)過(guò)程中是用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è)是頁(yè)面?zhèn)鱽?lái)的標(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)
