Vue.js小學堂 | Step.3 了解component的Registration與component+v-for的使用
component是一個將常用的樣板、模組包起來的功能，可以重複呼叫component免去編譯同樣程式碼的功能，利用component組成一個頁面，或是在頁面中呼叫相同組件的元素，而最常使用到component的類別有，獨立出header、footer、sidebar或是將重複出現的button或是表單欄位…等等的小元素獨立成一個元件。
本篇文章就來介紹component Registration 以及 一個簡單的component+v-for的小範例吧！
首先，我們要先來認識Global Registration(全局註冊)以及Local Registration(局部註冊)，以下的介紹都是讓初學者理解的大方向分類，分類方式都不是絕對的，如果是熟悉Vue的使用者也可以更加熟悉的選擇使用哪一種Registration~
1.Global Registration(全局註冊)
基本上是用來規劃版面的大架構，呼叫方式是使用 Vue.component('框架名稱','文件路徑'或是{子組件架構})
Step1. 在父層結構中引入子組件的文件，且在template上加入子組件的名稱
App.Vue
--------------------------------------------------------------------
<template lang="pug">
...
#app
my-header
...
</template><script lang="babel">import Header from './header.vue'Vue.component('my-header', Header);export default {
...
}</script>
Step2. 子組件：第一步驟完成並且Build後，就會在my-header的位置中產生header.Vue的框架了
header.Vue
--------------------------------------------------------------------<template lang="pug">
header
a(href="index.html")#logo
ul#menu
li
a(href="page1.html") Button1
li
a(href="page2.html") Button2
li
a(href="page3.html") Button3...
</template>
＊如果Global Registration不想要將父層架構與子組件分成兩個檔案也可以寫成：
<template lang="pug">
...
#app
my-header
...
</template><script lang="babel">Vue.component('my-header', {
template:'<header> /* ... */ <header>',
});export default {
...
}
</script>
2.Local Registration(局部註冊)
同一頁中，可以重複建立相同寫法的小框架，例如按鈕、表單欄位…等等的元素，呼叫方式是Var一個參數後帶入new Vue中的components，需要注意的是局部註冊的物件不能帶到其他頁面中使用的喔！
<template lang="pug">
...
#app
BaseButton(@click.native="search") //加上.native是為了監聽子組件上的click事件
...
</template><script lang="babel">var BaseButton = {
template: '<button value="Hello">Try me ！</button>'
};export default {
...
components: {
'BaseButton': BaseButton,
},
methods:{
search(){
console.log('Search');
}
},
...
}</script>
3.component+for迴圈的小範例教學：
Step1. 建立data，組成的資料都要以JSON格式設定喔！
new Vue({
...
data: {
objects: [
{id:'001',title:'Approachable',content: 'Already know HTML, CSS and JavaScript? Read the guide and start building things in no time!'},
{id:'002',title:'Versatile',content: 'An incrementally adoptable ecosystem that scales between a library and a full-featured framework.'},
{id:'003',title:'Performant',content: '20KB min+gzip RuntimeBlazing Fast Virtual DOMMinimal Optimization Efforts'},
]
}
...
})orexport default {
...
data(){
return{
objects:[
/* ... */
]
}
...
},
Step2. 父層框架建立子組件，完成後定義迴圈的data以及呼叫架構
<template lang="pug"> //父層框架
...
#app
tab-items(:obj="item" v-for="item in objects") //子組件
...
</template>說明：1.v-for：定義每一筆資料的參數(item)呼叫data的參數(objects)
2.v-bind(縮寫為:)：bind一個新的參數值(obj)，這個參數值(obj)會傳遞for迴圈中每一筆資料(item)給子組件的props，所以在下一步要記得定義props，名稱要與bind的參數一樣才行喔！
Step3. component組件的template架構與props建立，完成後component+for迴圈就可以順利建立了~
Vue.component('tab-items',{
props:['obj'], //父層框架中bind的參數
template:'<div class="col"><h2 class="title">{{obj.title}}</h2><br><div>{{obj.content}}</div></div>' //呼叫父層參數中的項目
})component+for迴圈的範例：
以上就是本篇文章的介紹，component Registration的使用有沒有讓你更了解一點了呢？
其實習慣Vue後要使用哪一種Registration就會很快速的反應過來了，初學者可以用本篇文章的大方向分類作為基礎就好，如果你的專案越來越龐大，就會更加熟練地選擇你所需要的Registration方式了~
如果你有更好的分類方式也歡迎和我一起分享歐~
那我們下篇再見！
