好了，那么局部組件應(yīng)該怎么注冊呢？你可以通過在Vue實(shí)例選項(xiàng)components注冊僅在其作用域中可用的局部組件。

Vue實(shí)例選項(xiàng)components包含了一個(gè)屬性，鍵是組件的名稱，值是一個(gè)對象，包含了組件的模板等屬性。

每個(gè)Vue組件實(shí)例都有獨(dú)立范圍的作用域的，這意味著子組件的模板中無法獲取到父組件的數(shù)據(jù)，那么Vue可以通過使用props參數(shù)來實(shí)現(xiàn)父組件向子組件傳遞數(shù)據(jù)。

可以看到，我們定義了一個(gè)props數(shù)組接收來自父組件傳遞的數(shù)據(jù)，因?yàn)楦附M件傳遞的數(shù)據(jù)可能是多個(gè)。而事實(shí)上，props不一定是數(shù)組，也可以是對象，可以詳細(xì)的指定父組件傳遞的數(shù)據(jù)規(guī)則，包括默認(rèn)值，數(shù)據(jù)類型等。

props: {
    link: {
        type: String, //數(shù)據(jù)類型
        defalut: "https://www.baidu.com/" //默認(rèn)值
    }
}

那么父組件如何動態(tài)的傳遞數(shù)據(jù)給子組件呢？還記得v-bind指令的作用嗎，其作用是用于動態(tài)綁定html屬性或者是組件的props值，所以應(yīng)該使用v-bind指令來動態(tài)傳遞數(shù)據(jù)。

我們知道，父組件使用 prop 傳遞數(shù)據(jù)給子組件。但子組件怎么跟父組件通信呢？這個(gè)時(shí)候 Vue 的自定義事件系統(tǒng)就派得上用場了。
假設(shè)我們在寫一個(gè)評論系統(tǒng)，評論部分是Vue組件，評論提交之后我們要將評論的內(nèi)容展示出來。
先來寫出評論組件吧

評論組件模板包含了一個(gè)輸入框和一個(gè)提交評論的按鈕，就這么簡單，然后，就全局注冊這個(gè)組件

Vue.component("i-comment", {
    template: "#comment-component",
    data: function(){
        return {
            commentValue: ""
        }
    },
    methods: {
      handleSubmit: function(){
          if(this.commentValue.length < 1){
              alert("評論不能為空");
              return;
          }
          this.$emit("content", this.commentValue);
          this.commentValue = "";
      }
    }
})

可能你會發(fā)現(xiàn)，組件里的data實(shí)例選項(xiàng)跟之前的寫法不一樣，是的，這個(gè)在寫組件的時(shí)候要注意的地方，Vue規(guī)定了組件中的data選項(xiàng)必須是函數(shù)。然后給提交按鈕綁定了一個(gè)點(diǎn)擊事件handleSubmit，當(dāng)你填寫了評論內(nèi)容，并點(diǎn)擊提交評論的時(shí)候，組件會通過 $emit(eventName) 觸發(fā)事件，并帶有一個(gè)參數(shù)，就是把評論的內(nèi)容傳遞給父組件。

既然子組件是通過 $emit(eventName)來和父組件通信，那么父組件如何接收子組件傳遞過來的數(shù)據(jù)呢，答案是，使用 $on(eventName) 監(jiān)聽事件。

    
    評論列表
    

        

            {{ item.time }}
            {{ item.content }}
        
    

在父組件中，監(jiān)聽子組件中定義的事件名，并調(diào)用一個(gè)方法 commentData。commentData方法用來獲取子組件傳遞給父組件的參數(shù)，這樣就是一個(gè)子組件向父組件通信的過程。 可以查看完整的例子 。

接下來，通過實(shí)際動手來實(shí)現(xiàn)一個(gè) Switch UI 組件。首先思考下Switch組件需要有哪些基本的API。

考慮到使用場景，需要制定不同尺寸的Switch組件，所以需要 size API。
考慮到會出現(xiàn)禁止使用的場景，需要禁止和啟用組件的功能，所以需要 disabled API。
考慮到需要自定義開啟和關(guān)閉時(shí)的背景顏色，所以需要 on-color 和 off-color API來自定義背景色。
同理，可能需要自定義開啟和關(guān)閉時(shí)顯示的文字，所以需要 on-text 和 off-text API來自定義顯示的文字。
可能還會需要通過事件監(jiān)聽來獲取當(dāng)前的狀態(tài)，并根據(jù)狀態(tài)做一些操作，所以需要一個(gè)事件來監(jiān)聽狀態(tài)的變化，所以需要 on-change API。

那么基本的API都列出來了，現(xiàn)在就可以開始一步步實(shí)現(xiàn)這些功能了。首先寫出組件模板的基本框架。

然后得注冊這個(gè)組件吧。

var prefixClass = "vut-switch";
Vue.component("vut-switch",{
    template: "#switch-component",
    props: {
        value: {
            type: Boolean,
            default: false
        }
    },
    data: function(){
        return {
            currentValue: this.value //當(dāng)前狀態(tài)
        }
    },
    computed: {
        wrapClass: function(){
            return prefixClass + "-wrap";
        },
        switchClass: function(){
            return [
                prefixClass,
                {
                    [prefixClass + "-checked"]: this.currentValue
                }
            ];
        }
    }
})

基本上架子就搭建好了。 然后就開始實(shí)現(xiàn)那些列出來的API。先來看如何實(shí)現(xiàn)size尺寸。

size尺寸的值肯定是通過父組件傳遞過來的，所以就先在子組件中的props選項(xiàng)中定義好size對象。

props: {
    value: {
        type: Boolean,
        default: false
    },
    size: String //尺寸
}

然后我們的思路是通過不同的樣式來控制渲染出來的Switch組件。我們根據(jù)傳入的不同尺寸的值來添加不同的Class值，制定不同的樣式，所以switchClass計(jì)算屬性中可這么寫：

switchClass: function(){
    return [
        prefixClass,
        {
            [prefixClass + "-checked"]: this.currentValue,
            [prefixClass +"-"+ this.size]: this.size
        }
    ];
}

然后就是添加對應(yīng)的樣式。

/*小尺寸*/
.vut-switch-small{
    width: 40px;
    height: 20px;
}
.vut-switch-small:after{
    width: 16px;
    height: 16px;
}
.vut-switch-small.vut-switch-checked:after{
    left: 22px;
}

/*大尺寸*/
.vut-switch-large{
    width: 60px;
}
.vut-switch-large.vut-switch-checked:after{
    left: 38px;
}

最后我們就在Vue實(shí)例初始化模板中使用Switch組件。

這樣我們就可以控制顯示Switch組件的尺寸了，效果如下：

然后來看看如何實(shí)現(xiàn)自定義背景色的。同樣也是先在子組件的props選項(xiàng)中定義好傳遞過來的數(shù)據(jù)。

props: {
    value: {
        type: Boolean,
        default: false
    },
    size: String, //尺寸
    onColor: String, //開啟時(shí)的自定義背景色
    ofColor: String //關(guān)閉時(shí)的自定義背景色
}

然后我們通過當(dāng)前的狀態(tài)來控制顯示不同的背景色，也就是要關(guān)注 currentValue 值。先來寫一個(gè)設(shè)置背景色的函數(shù)，根據(jù)currentValue值的變化來設(shè)置背景色。

setBackgroundColor: function(){
    let customColor = this.currentValue ? this.onColor : this.offColor;
    this.$refs.switch.style.backgroundColor = customColor;
}

然后監(jiān)聽currentValue值的變化來調(diào)用這個(gè)函數(shù)。

watch: {
    currentValue: function(){
        this.setBackgroundColor();
    }
}

最后我們就在Vue實(shí)例初始化模板中使用Switch組件。

效果如下：

完整的例子請查看 switch組件 。

本著學(xué)習(xí)和總結(jié)的態(tài)度寫的文章，文中有任何錯誤和問題，可以在github上指出 issues 。文中的案例都放置在github上，地址：https://github.com/webproblem/IntoVue。