一步一步学Vue(三)

　　接上篇，有同事看了我写的博客，觉得我这人不靠谱，文笔太白了，不够严肃，所以这次我一定要做一个严肃的人，写博客要有写博客的态度，第三篇开始我在考虑一个问题，会不会太着急了，要知道Vue的组件化时它的一个买点，现在还没有完全的过一遍其核心概念我就开始结合后端了，有点操之过急了，没写过这类博文，大家见谅。

　　计划由于上述原因就会有些变动，会在接下来的文章中，先以demo的形式把一些核心概念先过一遍，这样我们才能写逼格很高的代码，要不写代码的时候总是捉急，就如以前学数学概念的时候，没学到的知识不能用，但是当前学的知识去解题又土又笨，学了后面的知识才发现原来解法如此可爱，好了，水话结束，我们以component开始我们的第三篇。

1、什么是组件

　　现在的前端框架，假如做宣传，不提组件化就感觉没有前途，三大主流框架（Vue，React，Ng2+）都是完全支持组件化开发，那什么是组件化呢，这里我不会去拿百度google的结果贴出来，说一下简单的理解。我理解的组件化就是把内容分块，把业务分块，把结构分块，可能还有其它维度；所谓分块其实专业一点可以称为封装，封装、继承、多态是面向对象中的概念，但是也是代码重用的一种手段，我们对代码、对系统进行组件化也是代码重用的一种手段。

举个简单的例子，在H5发布之后，新增了几个复杂标签，比如video，audio等，这种本质上是什么东西呢，为什么浏览器遇到这个标签都能渲染出一个播放窗口呢，请看下图：

　　我在Html中添加了一个video标签，打开chrome控制台查看元素看到的内容说明了其实video这个标签是有好多基本标签组成的，只不过我们看不到而已，里面的shadow，大家可以去查一下shadow dom，不只是这种标签，甚至一个简单的输入框也不是看到的那么简单：

　　现在说一下vue中的组件或者前端框架中的组件，我们的目的也是构建类似video这样的标签，但是和video不同的是，video浏览器能识别，可以直接渲染，而我们定义的标签比如“my-video”浏览器不能识别无法渲染，但是我们借助框架的支持也可以渲染，这样不就相当于我们通过自定义标签的方式扩展了浏览器标签了么。

组件一般分为ui组件和业务组件，ui组件由于其业务无关性，重用度比较高。业务组件只是系统内封装，方便组件消费者使用，组件化的系统一般结构都是从根组件开始下方为二级组件，三级组件，由组件构成树状结构。

2、Vue中的组件

　　Vue中注册组件有两种方式：全局注册和局部注册；全局注册通过component方法进行注册，在Vue实例对象的作用于内都可以直接使用；局部注册通过给Vue实例中的components对象添加属性的方式来注册，这种方式注册的组件只能在当前实例（可能是一个组件，也可能是根实例）中使用。

1、全局注册

Vue.component('comp1',options);

2、局部注册

var comp1={
  ....
};
new Vue({
   el:'#app',
   components:{
      'comp1':comp1
   }  
})

　　已经了解了组建的注册机制，我们需要关注的另外一个点就是，当组件在创建注册后，怎么进行交互呢，比如父子组件，兄弟组件以什么机制来进行数据传输呢？传值是web开发中很重要的一个环节；在熟悉的angular中，父子controller传值可以通过$emit 和 $broadcast ,前者向上传播，后者向下传播；但是并不建议使用后者，因为后者在传递过程中会遍历所有的同级节点。而向组件或者指令中传值，angular有自己的绑定策略，那么Vue中是不是也有类似的机制呢。没错，在Vue中建议的方式就是“props in ，event out”。

　　现在就以我们的todolist为例，简单说一下组件开发步骤：

　　1、划分设计组件

　　2、分析并实现组件定义

首先对我们的todolist进行一下组件化划分，按照我们对业务的理解，可以划分为以下几个组件：

其中包含todo-container容器组件，该组件用来管理其它组件；search-bar组件，todo-form组件、todolist组件、todolist组件的子组件todoitem组件。

下面我们基于上图，对我们的组件进行简单的定义：

var TodoItem=(function(){
    var id=1;
    return function(title,desc){
        this.title=title;
        this.desc=desc;
    }
})();
/**
 * 搜索组件
 */
var searchBar={
    template:`
        //TODO:
    `,
    data:function(){
        return {
            keyword:''
        }
    },
    methods:{
        search:function(){
            this.$emit('onsearch',this.keyword);
        }
    }

}
/**
 * 表单组件
 */
var todoForm={
    template:``,
    data:function(){
        return {
            id:'',
            title:'',
            desc:''
        }
    },
    methods:{
        ok:function(){
            this.$emit('onsave',new TodoItem(this.title,this.desc));

            this.title=this.desc='';
        }
    }

}
/**
 * 列表项组件
 */
var todoItem={
    template:`
    //TODO:
    `,
    props:['todo'],
    methods:{
        edit:function(){
            this.$emit('onedit',this.todo.id);
        },
        remove:function(){
            this.$emit('onremove',this.todo.id);
        }
    }
}
/**
 * 列表组件
 */
var todoList={
    template:`
        ...
        <todo-item  v-for="item in items" :todo="item"  @onedit="edit($event)" @onremove="remove($event)"></todo-item>
    `,
    props:['items'],
    components:{
        'todo-item':todoItem
    },
    methods:{
        edit:function($e){
            this.$emit('onedit',$e);
        },
        remove:function($e){
            this.$emit('onremove',$e);
        }
    }
}
/**
 * 容器组件
 * 说明：容器组件包括三个字组件
 */
var todoContainer={
    template:`
        <div class="container">
            <search-bar @onsearch="search($event)"></search-bar>
            <todo-form @onsave="save($event)"></todo-form>
            <todo-list :items="todos" @onremove="remove($event)" @onedit="edit($event)"></todo-list>
        </div>
    `,
    data:function(){
        return {
            items:[]
        }
    },
    components:{
        'search-bar':searchBar,
        'todo-form':todoForm,
        'todo-list':todoList
    },
    methods:{
        search:function($e){
            console.log('TODO search');
        },
        save:function($e){
            console.log('TODO save');
        },
        remove:function($e){
            console.log('TODO remove');
        },
        edit:function($e){
            console.log('TODO edit');
        }
    }
}

var app=new Vue({
    el:'#app',
    components:{
        'todo-container':todoContainer
    }
});

/**
 * 
 * 
 * <div id="app">
 *     <todo-container></todo-container>
 * </app>
 */

上面的为代码（应该算半成品代码），代表了基本的定义，以及依赖关系，最后的注释表示最终使用方式，具体可运行的代码我会放在下一篇细讲，并分析代码这样写的原因，大家可以根据组件设计草图，自己按照文旦去写一下自己的实现，然后通过对比我的实现比较一下优劣，可以在下方评论中说出你的思路或者好的想法，欢迎脑爆！希望大家先写出可运行的代码，周五晚上是大家最向往的时候，have a good weekend！！！ 休息一下。