接上篇，有同事看了我寫的博客，覺得我這人不靠譜，文筆太白了，不夠嚴(yán)肅，所以這次我一定要做一個(gè)嚴(yán)肅的人，寫博客要有寫博客的態(tài)度，第三篇開始我在考慮一個(gè)問題，會(huì)不會(huì)太著急了，要知道Vue的組件化時(shí)它的一個(gè)買點(diǎn)，現(xiàn)在還沒有完全的過一遍其核心概念我就開始結(jié)合后端了，有點(diǎn)操之過急了，沒寫過這類博文，大家見諒。

　　計(jì)劃由于上述原因就會(huì)有些變動(dòng)，會(huì)在接下來(lái)的文章中，先以demo的形式把一些核心概念先過一遍，這樣我們才能寫逼格很高的代碼，要不寫代碼的時(shí)候總是捉急，就如以前學(xué)數(shù)學(xué)概念的時(shí)候，沒學(xué)到的知識(shí)不能用，但是當(dāng)前學(xué)的知識(shí)去解題又土又笨，學(xué)了后面的知識(shí)才發(fā)現(xiàn)原來(lái)解法如此可愛，好了，水話結(jié)束，我們以component開始我們的第三篇。

1、什么是組件

　　現(xiàn)在的前端框架，假如做宣傳，不提組件化就感覺沒有前途，三大主流框架（Vue，React，Ng2+）都是完全支持組件化開發(fā)，那什么是組件化呢，這里我不會(huì)去拿百度google的結(jié)果貼出來(lái)，說一下簡(jiǎn)單的理解。我理解的組件化就是把內(nèi)容分塊，把業(yè)務(wù)分塊，把結(jié)構(gòu)分塊，可能還有其它維度；所謂分塊其實(shí)專業(yè)一點(diǎn)可以稱為封裝，封裝、繼承、多態(tài)是面向?qū)ο笾械母拍?，但是也是代碼重用的一種手段，我們對(duì)代碼、對(duì)系統(tǒng)進(jìn)行組件化也是代碼重用的一種手段。

舉個(gè)簡(jiǎn)單的例子，在H5發(fā)布之后，新增了幾個(gè)復(fù)雜標(biāo)簽，比如video，audio等，這種本質(zhì)上是什么東西呢，為什么瀏覽器遇到這個(gè)標(biāo)簽都能渲染出一個(gè)播放窗口呢，請(qǐng)看下圖：

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動(dòng)開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

 

　　我在Html中添加了一個(gè)video標(biāo)簽，打開chrome控制臺(tái)查看元素看到的內(nèi)容說明了其實(shí)video這個(gè)標(biāo)簽是有好多基本標(biāo)簽組成的，只不過我們看不到而已，里面的shadow，大家可以去查一下shadow dom，不只是這種標(biāo)簽，甚至一個(gè)簡(jiǎn)單的輸入框也不是看到的那么簡(jiǎn)單：

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動(dòng)開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

　　現(xiàn)在說一下vue中的組件或者前端框架中的組件，我們的目的也是構(gòu)建類似video這樣的標(biāo)簽，但是和video不同的是，video瀏覽器能識(shí)別，可以直接渲染，而我們定義的標(biāo)簽比如“my-video”瀏覽器不能識(shí)別無(wú)法渲染，但是我們借助框架的支持也可以渲染，這樣不就相當(dāng)于我們通過自定義標(biāo)簽的方式擴(kuò)展了瀏覽器標(biāo)簽了么。

組件一般分為ui組件和業(yè)務(wù)組件，ui組件由于其業(yè)務(wù)無(wú)關(guān)性，重用度比較高。業(yè)務(wù)組件只是系統(tǒng)內(nèi)封裝，方便組件消費(fèi)者使用，組件化的系統(tǒng)一般結(jié)構(gòu)都是從根組件開始下方為二級(jí)組件，三級(jí)組件，由組件構(gòu)成樹狀結(jié)構(gòu)。

2、Vue中的組件

　　Vue中注冊(cè)組件有兩種方式：全局注冊(cè)和局部注冊(cè)；全局注冊(cè)通過component方法進(jìn)行注冊(cè)，在Vue實(shí)例對(duì)象的作用于內(nèi)都可以直接使用；局部注冊(cè)通過給Vue實(shí)例中的components對(duì)象添加屬性的方式來(lái)注冊(cè)，這種方式注冊(cè)的組件只能在當(dāng)前實(shí)例（可能是一個(gè)組件，也可能是根實(shí)例）中使用。

1、全局注冊(cè)

 

Vue.component('comp1',options);

 

2、局部注冊(cè)

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動(dòng)開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

'#app''comp1'

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動(dòng)開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

　　已經(jīng)了解了組建的注冊(cè)機(jī)制，我們需要關(guān)注的另外一個(gè)點(diǎn)就是，當(dāng)組件在創(chuàng)建注冊(cè)后，怎么進(jìn)行交互呢，比如父子組件，兄弟組件以什么機(jī)制來(lái)進(jìn)行數(shù)據(jù)傳輸呢？傳值是web開發(fā)中很重要的一個(gè)環(huán)節(jié)；在熟悉的angular中，父子controller傳值可以通過$emit 和 $broadcast ,前者向上傳播，后者向下傳播；但是并不建議使用后者，因?yàn)楹笳咴趥鬟f過程中會(huì)遍歷所有的同級(jí)節(jié)點(diǎn)。而向組件或者指令中傳值，angular有自己的綁定策略，那么Vue中是不是也有類似的機(jī)制呢。沒錯(cuò)，在Vue中建議的方式就是“props in ，event out”。

　　現(xiàn)在就以我們的todolist為例，簡(jiǎn)單說一下組件開發(fā)步驟：

　　1、劃分設(shè)計(jì)組件

　　2、分析并實(shí)現(xiàn)組件定義

首先對(duì)我們的todolist進(jìn)行一下組件化劃分，按照我們對(duì)業(yè)務(wù)的理解，可以劃分為以下幾個(gè)組件：

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動(dòng)開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

其中包含todo-container容器組件，該組件用來(lái)管理其它組件；search-bar組件，todo-form組件、todolist組件、todolist組件的子組件todoitem組件。

下面我們基于上圖，對(duì)我們的組件進(jìn)行簡(jiǎn)單的定義：

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動(dòng)開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

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='';
        }
    }

}/**
 * 列表項(xiàng)組件 */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);
        }
    }
}/**
 * 容器組件
 * 說明：容器組件包括三個(gè)字組件 */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> */

Android培訓(xùn),安卓培訓(xùn),手機(jī)開發(fā)培訓(xùn),移動(dòng)開發(fā)培訓(xùn),云培訓(xùn)培訓(xùn)

上面的為代碼（應(yīng)該算半成品代碼），代表了基本的定義，以及依賴關(guān)系，最后的注釋表示最終使用方式，具體可運(yùn)行的代碼我會(huì)放在下一篇細(xì)講，并分析代碼這樣寫的原因，大家可以根據(jù)組件設(shè)計(jì)草圖，自己按照文旦去寫一下自己的實(shí)現(xiàn)，然后通過對(duì)比我的實(shí)現(xiàn)比較一下優(yōu)劣，可以在下方評(píng)論中說出你的思路或者好的想法，歡迎腦爆！希望大家先寫出可運(yùn)行的代碼，周五晚上是大家最向往的時(shí)候，have a good weekend！?。?休息一下。

 

http://www.cnblogs.com/Johnzhang/p/7218830.html