Vuejs第十三篇之組件——雜項(xiàng)
什么是組件?
組件(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è)工廠(chǎng)函數(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)站的支持!
相關(guān)文章
element的el-form和el-table嵌套使用實(shí)現(xiàn)
本文主要介紹了element的el-form和el-table嵌套使用實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue?數(shù)據(jù)綁定事件綁定樣式綁定語(yǔ)法示例
這篇文章主要為大家介紹了Vue?數(shù)據(jù)綁定事件綁定樣式綁定語(yǔ)法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07
vue項(xiàng)目中監(jiān)聽(tīng)手機(jī)物理返回鍵的實(shí)現(xiàn)
這篇文章主要介紹了vue項(xiàng)目中監(jiān)聽(tīng)手機(jī)物理返回鍵的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
vue中LocalStorage與SessionStorage的區(qū)別與用法
本文主要介紹了LocalStorage和SessionStorage。LocalStorage和SessionStorage是兩種存儲(chǔ)方式,本文詳細(xì)的介紹一下區(qū)別以及用法,感興趣的可以了解一下2021-09-09
vue進(jìn)行post和get請(qǐng)求實(shí)例講解
這篇文章主要介紹了vue進(jìn)行post和get請(qǐng)求實(shí)例講解,違章圍繞post和get請(qǐng)求的相關(guān)資料展開(kāi)詳細(xì)內(nèi)容,具有一的的參考價(jià)值,需要的小伙伴可以參考一下2022-03-03
vue.js自定義組件實(shí)現(xiàn)v-model雙向數(shù)據(jù)綁定的示例代碼
這篇文章主要介紹了vue.js自定義組件實(shí)現(xiàn)v-model雙向數(shù)據(jù)綁定的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01

