DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Vuejs第十三篇之組件——雜項
Vuejs第十三篇之組件——雜項
編輯:關於JavaScript     

什麼是組件?

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

本篇資料是小編參考官方文檔的基礎上整理的一篇更加細致的說明,代碼更多更全,非常適合新手學習。

官方文檔:

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

組件——雜項詳細介紹如下所示:

①組件和v-for

簡單來說,就是組件被多次復用;

例如表格裡的某一行,又例如電商的商品櫥窗展示(單個櫥窗),都可以成為可以被復用的組件;

只要編寫其中一個作為組件,然後使數據來源成為一個數組(或對象,但個人覺得最好是數組),通過v-for的遍歷,組件的每個實例,都可以獲取這個數組中的一項,從而生成全部的組件。

而數據傳輸,由於復用,所以需要使用props,將遍歷結果i,和props綁定的數據綁定起來,綁定方法同普通的形式,在模板中綁定。

示例代碼:

<div id="app"> 
<button @click="toknowchildren">點擊讓子組件顯示</button> 
<table> 
<tr> 
<td>索引</td> 
<td>ID</td> 
<td>說明</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: { //第一個子組件 
template: "<tr>" + 
"<td>{{index}}</td>" + 
"<td>{{id}}</td>" + 
"<td>這裡是子組件</td>" + 
"</tr>", 
props: ['id','index'] 
} 
} 
}); 
</script> 

說明:

【1】記得將要傳遞的數據放在props裡!

【2】將index和索引$index綁定起來,因為索引從0開始,因此索引所在列是從0開始;id是和遍歷items的i綁定在一起的,因此id從1開始。

【3】可以在父組件中,通過this.$children來獲取子組件(但是比較麻煩,特別是組件多的時候,比較難定位);

②編寫可復用的組件:

簡單來說,一次性組件(只用在這裡,不會被復用的)跟其他組件緊密耦合是可以的,但是,可復用的組件應當定義一個清晰的公開接口。(不然別人怎麼用?)

可復用的組件,基本都是要和外部交互的,而一個組件和外部公開的交互接口有:

【1】props:允許外部環境數據傳遞給組件;

【2】事件:允許組件觸發外部環境的action,就是說通過在掛載點添加v-on指令,讓子組件的events觸發時,同時觸發父組件的methods;

【3】slot:分發,允許將父組件的內容插入到子組件的視圖結構中。

如代碼:

<div id="app"> 
<p>這是第一個父組件</p> 
<widget 
:the-value="test" 
@some="todo"> 
<span>【第一個父組件插入的內容】</span> 
</widget> 
</div> 
<div id="app2"> 
<p>這是第二個父組件</p> 
<widget @some="todo"> 
</widget> 
</div> 
<script> 
Vue.component("widget", { 
template: "<button @click='dosomething'><slot></slot>這是一個復用的組件,點擊他{{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("這是第一個父組件") 
} 
} 
}); 
var vm_other = new Vue({ 
el: '#app2', 
data: { 
name: "first" 
}, 
methods: { 
todo: function () { 
console.log("這是另外一個父組件") 
} 
} 
}); 
</script> 

說明:

【1】在第一個父組件中使用了分發slot,使用了props來傳遞值(將test的值傳到子組件的theValue之中);

【2】在兩個組件中,子組件在點擊後,調用methods裡的dosomething方法,然後執行了events裡的some事件。又通過掛載點的@some=”todo”,將子組件的some事件和父組件的todo方法綁定在一起。

因此,點擊子組件後,最終會執行父組件的todo方法。

【3】更改父組件中,被傳遞到子組件的值,會同步更改子組件的值(即二者會數據綁定);

③異步組件:

按照我的理解,簡單來說,一個大型應用,他有多個組件,但有些組件無需立即加載,因此被分拆成多個組件(比如說需要立即加載的,不需要立即加載的);

需要立即加載的,顯然放在同一個文件中比較好(或者同一批一起請求);

而不需要立即加載的,可以放在其他文件中,但需要的時候,再ajax向服務器請求;

這些後續請求的呢,就是異步組件;

做到這種異步功能的,就是Vue.js的功能——允許將組件定義為一個工廠函數,動態解析組件的定義。

可以配合webpack使用。

至於如何具體使用,我還不太明白,教程中寫的不清,先擱置等需要的時候來研究。

鏈接:

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

④資源命名的約定:

簡單來說,html標簽(比如div和DIV是一樣的)和特性(比如要寫成v-on這樣的指令而不是vOn)是不區分大小寫的。

而資源名往往是寫成駝峰式(比如camelCase駝峰式),或者單詞首字母都大寫的形式(比如PascalCase,我不知道該怎麼稱呼這個,不過這樣寫很少的說)。

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

Vue.js可以自動識別這個並轉換,

<my-template></my-template>

以上那個模板可以自動替換這個標簽。

⑤遞歸組件:

簡單來說,遞歸組件就是組件在自己裡內嵌自己的模板。

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

大概樣子是這樣的,

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

這種是無限遞歸,肯定是不行的。因此,需要控制他遞歸的層數,例如通過數據來控制遞歸,當數據為空時,則停止遞歸。

示例代碼如下:

<ul id="app"> 
<li> 
{{b}} 
</li> 
<my-template v-if="a" :a="a.a" :b="a.b"></my-template> 
</ul> 
<script> 
Vue.component("myTemplate", { 
template: '<ul><li>{{b}}</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> 

說明:

【1】向下傳遞時,通過props傳遞a的值和b的值,其中a的值作為遞歸後組件的a和b的值的數據來源;
然後判斷傳遞到遞歸後的組件的a的值是否存在,如果存在則繼續遞歸;
如果a的值不存在,則停止遞歸。

⑥片斷實例:

簡單來說,所謂片斷實例,就是組件的模板不是處於一個根節點之下:

片斷實例代碼:

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

非片斷實例:

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

片斷實例的以下特性被忽略:

【1】組件元素上的非流程控制指令(例如寫在掛載點上的,由父組件控制的v-show指令之類,但注意,v-if屬於流程控制指令);

【2】非props特性(注意,props不會被忽略,另外props是寫在掛載點上的);

【3】過渡(就是transition這個屬性,將被忽略);

更多的參照官方文檔:

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

⑦內聯模板

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

以上所述是小編給大家介紹的Vuejs第十三篇之組件——雜項,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved