组件化
前端组件化开发理念
- 页面上的每个独立的 可视/可交互区域视为一个组件。
- 每个组件对应一个工程目录，组件所需的各种资源都在这个目录下就近维护。
- 由于组件具有独立性，因此组件与组件之间可以 自由组合。
- 页面只不过是组件的容器，负责组合组件形成功能完整的界面；
- 当不需要某个组件，或者想要替换组件时，可以整个目录删除/替换。
Vue 的组件化
Vue组件的官方文档，请自行阅读，补充基础知识。
需要重点提及的是，这个项目采用Vue2.0技术搭建，Vue2.0和1.0版本，在组件通信机制方面，有一个比较大的修改。
$dispatch 和 $broadcast 已经被弃用。请使用更多简明清晰的组件间通信和更好的状态管理方案，如：Vuex.
整理一下我目前掌握的Vue通信机制，归纳为
- prop 向下，父组件通过Prop传递数据变化到子组件。
- emit 事件向上，父组件通过监听子组件的事件，响应子组件的变化。
- bus 消息总线，提供不同组件间的事件监听。
- vuex 简单场景用bus，复杂场景用vuex。
项目改造
看回上一篇中完成的项目中的HTML代码，从第7行开始，到第61行结束，实现了一个简单表格+简单表单（三个显示字段）的布局，可以想象，当字段增加到20个或者更多的时候，这部分的代码行将远超过100行，有兴趣的不妨Google一下“函数超过100行”，相信你会回来吐槽这个布局HTML。
HTML修改
<div class="container" id="demo">
--------------------------- 一个表格 --------------------------------------
<demo-grid :datalist="list" :columnlist="columns" v-on:rowclick="showrow">
<div>
<h4><b>{{ title }}</b></h4>
</div>
</demo-grid>
--------------------------- 表格结束 --------------------------------------
--------------------------- 一个表单 --------------------------------------
<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>
-------------------------- 表单结束 --------------------------------------
</div>
名称为demo-grid的组件，接收两个参数，参数row接收的是父组件的row变量，参数columnlist接收的是父组件的columns变量。
父组件监听demo-grid的showrow事件，当showrow事件发生时，执行父组件中的showrow方法（在父组件的methods中，我们原来就写好的那个方法）
在<demo-grid></demo-grid>中间的HTML代码，Vue称之为Slot，一开始我的demo-grid这部分代码是这样的
<demo-grid :title="title" :datalist="list" :columnlist="columns" v-on:rowclick="showrow">
</demo-grid>
此处不详细说明Slot的用法，请自行阅读官方文档。
也就是说，我们可以使用两个方法定制组件，一个是通过数据属性，动态创建组件，另一个是组件提供部分的可定制区域，在调用组件的时候，程序员自行加入。
上面的代码只是组件调用（函数调用），原来的布局代码变成了一个组件，代码如下：
<!--- 组件模板 --!>
--------------------------- 表单组件 --------------------------------------
<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>
--------------------------- 表单结束 --------------------------------------
--------------------------- 表格组件 --------------------------------------
<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>
--------------------------- 表格结束 --------------------------------------
</script>
为了响应繆军的需求，原来HTML代码中的姓名、出生日期、电话号码都不见了。字段再多，我也不怕不怕了。
让我们默默向上帝祈祷，网页还能是原来的样子。
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的代码修改看起来比我们想象中的要简单。真的男人，不解释。
奇怪的事情发生了，刚刚我们向上帝的祈祷，西天佛祖好像听到了，太上老君显灵，运行起来一切都正常了，就像没修改过代码一样。
运行演示
下集预告
真正的动态数据， WebAPI的引入
网友评论