什么是組件？

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

本篇資料是小編參考官方文檔的基礎(chǔ)上整理的一篇更加細(xì)致的說(shuō)明，代碼更多更全，非常適合新手學(xué)習(xí)。

官方文檔：

http://cn.vuejs.org/guide/components.html#u52A8_u6001_u7EC4_u4EF6

組件——雜項(xiàng)詳細(xì)介紹如下所示：

①組件和v-for

簡(jiǎn)單來(lái)說(shuō)，就是組件被多次復(fù)用；

例如表格里的某一行，又例如電商的商品櫥窗展示（單個(gè)櫥窗），都可以成為可以被復(fù)用的組件；

只要編寫(xiě)其中一個(gè)作為組件，然后使數(shù)據(jù)來(lái)源成為一個(gè)數(shù)組（或?qū)ο?，但個(gè)人覺(jué)得最好是數(shù)組），通過(guò)v-for的遍歷，組件的每個(gè)實(shí)例，都可以獲取這個(gè)數(shù)組中的一項(xiàng)，從而生成全部的組件。

而數(shù)據(jù)傳輸，由于復(fù)用，所以需要使用props，將遍歷結(jié)果i，和props綁定的數(shù)據(jù)綁定起來(lái)，綁定方法同普通的形式，在模板中綁定。

示例代碼：

<div id="app"> 
<button @click="toknowchildren">點(diǎn)擊讓子組件顯示</button> 
<table> 
<tr> 
<td>索引</td> 
<td>ID</td> 
<td>說(shuō)明</td> 
</tr> 
<tr is="the-tr" v-for="i in items" v-bind:id="i" :index="$index"></tr> 
</table> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
items: [1, 2, 3, 4] 
}, 
methods: { 
toknowchildren: function () { //切換組件顯示 
console.log(this.$children); 
} 
}, 
components: { 
theTr: { //第一個(gè)子組件 
template: "<tr>" + 
"<td>{{index}}</td>" + 
"<td>{{id}}</td>" + 
"<td>這里是子組件</td>" + 
"</tr>", 
props: ['id','index'] 
} 
} 
}); 
</script> 

說(shuō)明：

【1】記得將要傳遞的數(shù)據(jù)放在props里！

【2】將index和索引$index綁定起來(lái)，因?yàn)樗饕龔?開(kāi)始，因此索引所在列是從0開(kāi)始；id是和遍歷items的i綁定在一起的，因此id從1開(kāi)始。

【3】可以在父組件中，通過(guò)this.$children來(lái)獲取子組件（但是比較麻煩，特別是組件多的時(shí)候，比較難定位）；

②編寫(xiě)可復(fù)用的組件：

簡(jiǎn)單來(lái)說(shuō)，一次性組件（只用在這里，不會(huì)被復(fù)用的）跟其他組件緊密耦合是可以的，但是，可復(fù)用的組件應(yīng)當(dāng)定義一個(gè)清晰的公開(kāi)接口。（不然別人怎么用？）

可復(fù)用的組件，基本都是要和外部交互的，而一個(gè)組件和外部公開(kāi)的交互接口有：

【1】props：允許外部環(huán)境數(shù)據(jù)傳遞給組件；

【2】事件：允許組件觸發(fā)外部環(huán)境的action，就是說(shuō)通過(guò)在掛載點(diǎn)添加v-on指令，讓子組件的events觸發(fā)時(shí)，同時(shí)觸發(fā)父組件的methods；

【3】slot：分發(fā)，允許將父組件的內(nèi)容插入到子組件的視圖結(jié)構(gòu)中。

如代碼：

<div id="app"> 
<p>這是第一個(gè)父組件</p> 
<widget 
:the-value="test" 
@some="todo"> 
<span>【第一個(gè)父組件插入的內(nèi)容】</span> 
</widget> 
</div> 
<div id="app2"> 
<p>這是第二個(gè)父組件</p> 
<widget @some="todo"> 
</widget> 
</div> 
<script> 
Vue.component("widget", { 
template: "<button @click='dosomething'><slot></slot>這是一個(gè)復(fù)用的組件，點(diǎn)擊他{{theValue}}</button>", 
methods: { 
dosomething: function () { 
this.$emit("some"); 
} 
}, 
events: { 
some: function () { 
console.log("widget click"); 
} 
}, 
props: ['theValue'] 
}) 
var vm = new Vue({ 
el: '#app', 
data: { 
test: "test" 
}, 
methods: { 
todo: function () { 
console.log("這是第一個(gè)父組件") 
} 
} 
}); 
var vm_other = new Vue({ 
el: '#app2', 
data: { 
name: "first" 
}, 
methods: { 
todo: function () { 
console.log("這是另外一個(gè)父組件") 
} 
} 
}); 
</script> 

說(shuō)明：

【1】在第一個(gè)父組件中使用了分發(fā)slot，使用了props來(lái)傳遞值（將test的值傳到子組件的theValue之中）；

【2】在兩個(gè)組件中，子組件在點(diǎn)擊后，調(diào)用methods里的dosomething方法，然后執(zhí)行了events里的some事件。又通過(guò)掛載點(diǎn)的@some=”todo”，將子組件的some事件和父組件的todo方法綁定在一起。

因此，點(diǎn)擊子組件后，最終會(huì)執(zhí)行父組件的todo方法。

【3】更改父組件中，被傳遞到子組件的值，會(huì)同步更改子組件的值（即二者會(huì)數(shù)據(jù)綁定）；

③異步組件：

按照我的理解，簡(jiǎn)單來(lái)說(shuō)，一個(gè)大型應(yīng)用，他有多個(gè)組件，但有些組件無(wú)需立即加載，因此被分拆成多個(gè)組件（比如說(shuō)需要立即加載的，不需要立即加載的）；

需要立即加載的，顯然放在同一個(gè)文件中比較好（或者同一批一起請(qǐng)求）；

而不需要立即加載的，可以放在其他文件中，但需要的時(shí)候，再ajax向服務(wù)器請(qǐng)求；

這些后續(xù)請(qǐng)求的呢，就是異步組件；

做到這種異步功能的，就是Vue.js的功能——允許將組件定義為一個(gè)工廠函數(shù)，動(dòng)態(tài)解析組件的定義。

可以配合webpack使用。

至于如何具體使用，我還不太明白，教程中寫(xiě)的不清，先擱置等需要的時(shí)候來(lái)研究。

鏈接：

http://cn.vuejs.org/guide/components.html#u5F02_u6B65_u7EC4_u4EF6

④資源命名的約定：

簡(jiǎn)單來(lái)說(shuō)，html標(biāo)簽（比如div和DIV是一樣的）和特性（比如要寫(xiě)成v-on這樣的指令而不是vOn）是不區(qū)分大小寫(xiě)的。

而資源名往往是寫(xiě)成駝峰式（比如camelCase駝峰式），或者單詞首字母都大寫(xiě)的形式（比如PascalCase，我不知道該怎么稱(chēng)呼這個(gè)，不過(guò)這樣寫(xiě)很少的說(shuō)）。

Vue.component("myTemplate", {
//......略
})

Vue.js可以自動(dòng)識(shí)別這個(gè)并轉(zhuǎn)換，

<my-template></my-template>

以上那個(gè)模板可以自動(dòng)替換這個(gè)標(biāo)簽。

⑤遞歸組件：

簡(jiǎn)單來(lái)說(shuō)，遞歸組件就是組件在自己里內(nèi)嵌自己的模板。

組件想要遞歸，需要name屬性，而Vue.component自帶name屬性。

大概樣子是這樣的，

<div id="app"> 
<my-template></my-template> 
</div> 
<script> 
Vue.component("myTemplate", { 
template: "<p><my-template></my-template></p>" 
}) 

這種是無(wú)限遞歸，肯定是不行的。因此，需要控制他遞歸的層數(shù)，例如通過(guò)數(shù)據(jù)來(lái)控制遞歸，當(dāng)數(shù)據(jù)為空時(shí)，則停止遞歸。

示例代碼如下：

<ul id="app"> 
<li> 
{} 
</li> 
<my-template v-if="a" :a="a.a" :b="a.b"></my-template> 
</ul> 
<script> 
Vue.component("myTemplate", { 
template: '<ul><li>{}</li><my-template v-if="a" :a="a.a" :b="a.b"></my-template></ul>', 
props: ["a", "b"] 
}) 
var data = { 
a: { 
a: { 
a: 0, 
b: 3 
}, 
b: 2 
}, 
b: 1 
} 
var vm = new Vue({ 
el: '#app', 
data: data, 
methods: { 
todo: function () { 
this.test += "!"; 
console.log(this.test); 
} 
} 
}); 
</script> 

說(shuō)明：

【1】向下傳遞時(shí)，通過(guò)props傳遞a的值和b的值，其中a的值作為遞歸后組件的a和b的值的數(shù)據(jù)來(lái)源；
然后判斷傳遞到遞歸后的組件的a的值是否存在，如果存在則繼續(xù)遞歸；
如果a的值不存在，則停止遞歸。

⑥片斷實(shí)例：

簡(jiǎn)單來(lái)說(shuō)，所謂片斷實(shí)例，就是組件的模板不是處于一個(gè)根節(jié)點(diǎn)之下：

片斷實(shí)例代碼：

Vue.component("myTemplate", { 
template: '<div>1</div>' + 
'<div>2</div>', 
}) 

非片斷實(shí)例：

Vue.component("myTemplate", { 
template: '<div>' + 
'<div>1</div>' + 
'<div>2</div>' + 
'</div>', 
}) 

片斷實(shí)例的以下特性被忽略：

【1】組件元素上的非流程控制指令（例如寫(xiě)在掛載點(diǎn)上的，由父組件控制的v-show指令之類(lèi)，但注意，v-if屬于流程控制指令）；

【2】非props特性（注意，props不會(huì)被忽略，另外props是寫(xiě)在掛載點(diǎn)上的）；

【3】過(guò)渡（就是transition這個(gè)屬性，將被忽略）；

更多的參照官方文檔：

http://cn.vuejs.org/guide/components.html#u7247_u65AD_u5B9E_u4F8B

⑦內(nèi)聯(lián)模板

參照：http://cn.vuejs.org/guide/components.html#u5185_u8054_u6A21_u677F

以上所述是小編給大家介紹的Vuejs第十三篇之組件——雜項(xiàng)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論