Vue.JS 单页应用 - 联系人管理（四）

组件化

前端组件化开发理念

• 页面上的每个独立的 可视/可交互区域视为一个组件。
• 每个组件对应一个工程目录，组件所需的各种资源都在这个目录下就近维护。
• 由于组件具有独立性，因此组件与组件之间可以 自由组合。
• 页面只不过是组件的容器，负责组合组件形成功能完整的界面；
• 当不需要某个组件，或者想要替换组件时，可以整个目录删除/替换。
  
  

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修改

---------------------------         一个表格     --------------------------------------
  
     

      
{{ title }}
    
  
---------------------------         表格结束     --------------------------------------

---------------------------         一个表单     --------------------------------------
  
    

      
编辑
    
    

          

            新增
            保存
            删除
          
        
  
--------------------------          表单结束     --------------------------------------

名称为demo-grid的组件，接收两个参数，参数row接收的是父组件的row变量，参数columnlist接收的是父组件的columns变量。
父组件监听demo-grid的showrow事件，当showrow事件发生时，执行父组件中的showrow方法（在父组件的methods中，我们原来就写好的那个方法）
在中间的HTML代码，Vue称之为Slot，一开始我的demo-grid这部分代码是这样的

此处不详细说明Slot的用法，请自行阅读官方文档。
也就是说，我们可以使用两个方法定制组件，一个是通过数据属性，动态创建组件，另一个是组件提供部分的可定制区域，在调用组件的时候，程序员自行加入。
上面的代码只是组件调用（函数调用），原来的布局代码变成了一个组件，代码如下：

---------------------------         表单组件     --------------------------------------

---------------------------         表单结束     --------------------------------------

---------------------------         表格组件     --------------------------------------

为了响应繆军的需求，原来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的代码修改看起来比我们想象中的要简单。真的男人，不解释。
奇怪的事情发生了，刚刚我们向上帝的祈祷，西天佛祖好像听到了，太上老君显灵，运行起来一切都正常了，就像没修改过代码一样。

运行演示

JSFiddler

下集预告

真正的动态数据， WebAPI的引入

系列文章目录

1. 列表显示
2. 表单显示
3. 表单CRUD
4. Vue组件化
5. 从前端到后端