組件化
前端組件化開(kāi)發(fā)理念
- 頁(yè)面上的每個(gè)獨(dú)立的 可視/可交互區(qū)域視為一個(gè)組件晾腔。
- 每個(gè)組件對(duì)應(yīng)一個(gè)工程目錄遗座，組件所需的各種資源都在這個(gè)目錄下就近維護(hù)豆瘫。
- 由于組件具有獨(dú)立性吞鸭，因此組件與組件之間可以 自由組合寺董。
- 頁(yè)面只不過(guò)是組件的容器，負(fù)責(zé)組合組件形成功能完整的界面瞒大；
- 當(dāng)不需要某個(gè)組件螃征，或者想要替換組件時(shí)，可以整個(gè)目錄刪除/替換透敌。
Vue 的組件化
Vue組件的官方文檔盯滚，請(qǐng)自行閱讀踢械，補(bǔ)充基礎(chǔ)知識(shí)。
需要重點(diǎn)提及的是魄藕，這個(gè)項(xiàng)目采用Vue2.0技術(shù)搭建内列，Vue2.0和1.0版本，在組件通信機(jī)制方面背率，有一個(gè)比較大的修改话瞧。
$dispatch 和 $broadcast 已經(jīng)被棄用。請(qǐng)使用更多簡(jiǎn)明清晰的組件間通信和更好的狀態(tài)管理方案寝姿，如：Vuex.
整理一下我目前掌握的Vue通信機(jī)制交排，歸納為
- prop 向下，父組件通過(guò)Prop傳遞數(shù)據(jù)變化到子組件饵筑。
- emit 事件向上埃篓，父組件通過(guò)監(jiān)聽(tīng)子組件的事件，響應(yīng)子組件的變化根资。
- bus 消息總線架专，提供不同組件間的事件監(jiān)聽(tīng)。
- vuex 簡(jiǎn)單場(chǎng)景用bus玄帕，復(fù)雜場(chǎng)景用vuex部脚。
項(xiàng)目改造
看回上一篇中完成的項(xiàng)目中的HTML代碼，從第7行開(kāi)始裤纹，到第61行結(jié)束委刘，實(shí)現(xiàn)了一個(gè)簡(jiǎn)單表格+簡(jiǎn)單表單（三個(gè)顯示字段）的布局，可以想象鹰椒，當(dāng)字段增加到20個(gè)或者更多的時(shí)候钱雷，這部分的代碼行將遠(yuǎn)超過(guò)100行，有興趣的不妨Google一下“函數(shù)超過(guò)100行”吹零，相信你會(huì)回來(lái)吐槽這個(gè)布局HTML。
HTML修改
<div class="container" id="demo">
--------------------------- 一個(gè)表格 --------------------------------------
<demo-grid :datalist="list" :columnlist="columns" v-on:rowclick="showrow">
<div>
<h4><b>{{ title }}</b></h4>
</div>
</demo-grid>
--------------------------- 表格結(jié)束 --------------------------------------
--------------------------- 一個(gè)表單 --------------------------------------
<demo-form :row="row" :columnlist="columns">
<div class="panel-heading" slot="header">
<h3 class="panel-title">編輯</h3>
</div>
<div class="form-group" slot="footer">
<div class="col-sm-offset-2 col-sm-10">
<button @click="newrow" class="btn btn-primary">新增</button>
<button @click="saverow" class="btn btn-primary">保存</button>
<button @click="deleterow" class="btn btn-danger">刪除</button>
</div>
</div>
</demo-form>
-------------------------- 表單結(jié)束 --------------------------------------
</div>
名稱為demo-grid的組件拉庵，接收兩個(gè)參數(shù)灿椅，參數(shù)row接收的是父組件的row變量，參數(shù)columnlist接收的是父組件的columns變量钞支。
父組件監(jiān)聽(tīng)demo-grid的showrow事件茫蛹，當(dāng)showrow事件發(fā)生時(shí)，執(zhí)行父組件中的showrow方法（在父組件的methods中烁挟，我們?cè)瓉?lái)就寫(xiě)好的那個(gè)方法）
在<demo-grid></demo-grid>中間的HTML代碼婴洼，Vue稱之為Slot，一開(kāi)始我的demo-grid這部分代碼是這樣的
<demo-grid :title="title" :datalist="list" :columnlist="columns" v-on:rowclick="showrow">
</demo-grid>
此處不詳細(xì)說(shuō)明Slot的用法撼嗓，請(qǐng)自行閱讀官方文檔柬采。
也就是說(shuō)欢唾，我們可以使用兩個(gè)方法定制組件，一個(gè)是通過(guò)數(shù)據(jù)屬性粉捻，動(dòng)態(tài)創(chuàng)建組件礁遣，另一個(gè)是組件提供部分的可定制區(qū)域，在調(diào)用組件的時(shí)候肩刃，程序員自行加入祟霍。
上面的代碼只是組件調(diào)用（函數(shù)調(diào)用），原來(lái)的布局代碼變成了一個(gè)組件盈包，代碼如下：
<!--- 組件模板 --!>
--------------------------- 表單組件 --------------------------------------
<script type="text/x-template" id="form-template">
<div id="editform" class="panel panel-default">
<slot name="header"></slot>
<div class="panel-body">
<form class="form-horizontal" role="form" v-on:submit.prevent>
<div v-if="!column.iskey" class="form-group" v-for="column in columnlist">
<label class="col-sm-2 control-label">{{ column.caption }}</label>
<div class="col-sm-10">
<input class="form-control" type="date" v-if="column.type==='date'" v-model="row[column.name]" :id="column.name">
<input class="form-control" v-else type="text" v-model="row[column.name]">
</div>
</div>
<slot name="footer"></slot>
</form>
</div>
</div>
</script>
--------------------------- 表單結(jié)束 --------------------------------------
--------------------------- 表格組件 --------------------------------------
<script type="text/x-template" id="grid-template">
<div>
<slot></slot>
<table class="table table-bordered table-hover">
<thead>
<tr>
<td v-for="col in columnlist" v-if="!col.iskey">{{col.caption}}</td>
</tr>
</thead>
<tbody>
<tr v-for="item in datalist" v-on:click="rowclick(item)">
<td v-for="col in columnlist" v-if="!col.iskey">
{{item[col.name]}}
</td>
</tr>
</tbody>
</table>
</div>
--------------------------- 表格結(jié)束 --------------------------------------
</script>
為了響應(yīng)繆軍的需求沸呐，原來(lái)HTML代碼中的姓名、出生日期呢燥、電話號(hào)碼都不見(jiàn)了崭添。字段再多，我也不怕不怕了疮茄。
讓我們默默向上帝祈禱滥朱，網(wǎng)頁(yè)還能是原來(lái)的樣子。
Javascript 修改
Vue.component('demo-grid', {
template: '#grid-template',
props: ['datalist', 'columnlist'],
methods: {
rowclick: function(v) {
this.$emit('rowclick', v)
}
}
})
Vue.component('demo-form', {
template: '#form-template',
props: ['row', 'columnlist']
})
Javascript的代碼修改看起來(lái)比我們想象中的要簡(jiǎn)單力试。真的男人徙邻，不解釋。
奇怪的事情發(fā)生了畸裳，剛剛我們向上帝的祈禱缰犁，西天佛祖好像聽(tīng)到了，太上老君顯靈怖糊，運(yùn)行起來(lái)一切都正常了帅容，就像沒(méi)修改過(guò)代碼一樣。
運(yùn)行演示
下集預(yù)告
真正的動(dòng)態(tài)數(shù)據(jù)伍伤， WebAPI的引入
