摘要：從零開始實現(xiàn)一個級聯(lián)組件本文實現(xiàn)級聯(lián)組件需要用到自定義指令和組件通信相關(guān)知識，最好先閱讀以下兩篇文章自定義指令組件基礎(chǔ)與通信一組件簡介本文實現(xiàn)的是一個省市縣多級聯(lián)動組件，當(dāng)組件渲染完成后默認(rèn)會加載出所有的省名稱，當(dāng)用戶點擊某個省的名稱后，右

本文實現(xiàn)級聯(lián)組件需要用到自定義指令和組件通信相關(guān)知識，最好先閱讀以下兩篇文章:

Vue自定義指令

Vue組件基礎(chǔ)與通信

本文實現(xiàn)的是一個省、市、縣...多級聯(lián)動組件，當(dāng)組件渲染完成后默認(rèn)會加載出所有的省名稱，當(dāng)用戶點擊某個省的名稱后，右邊會自動添加一列顯示該省下對應(yīng)的市名稱列表，當(dāng)用戶點擊某個市后，右邊又會自動添加一列顯示該市下對應(yīng)的縣名稱列表，同時支持級聯(lián)列表的打開和關(guān)閉。

① 組件所需要的數(shù)據(jù)，數(shù)據(jù)結(jié)構(gòu)非常簡單，對象里面只有兩個屬性，一個是label(標(biāo)簽名)，如果當(dāng)前標(biāo)簽下還有子標(biāo)簽，則會多一個children屬性，children屬性值為一個數(shù)組，每個數(shù)組元素為其下的一個子標(biāo)簽。

// data.json， 為避免數(shù)據(jù)占用太多篇幅，這里只列舉了一條數(shù)據(jù)

[
    {
        "label": "江西",
        "children": [
            {
                "label": "贛州",
                "children": [
                    {
                        "label": "全南縣"
                    },
                    {
                        "label": "龍南縣"
                    }
                ]
            }
        ]
    }
]

② 我們的級聯(lián)組件分為上下兩部分組件，上部分顯示用戶選擇的路徑，下部分顯示用戶選擇列表，同時支持點擊級聯(lián)組件的上部分可以實現(xiàn)下半部分的打開和關(guān)閉，點擊組件外面關(guān)閉組件的下半部分，這里需要用到v-click-outside指令，這里自定義指令的代碼就不再重復(fù)，請參考Vue自定義指令
// Cascader.vue 新建一個Cascader.vue組件

注意到組件中有一個selectedItems數(shù)據(jù)，這是一個數(shù)組，默認(rèn)值為空數(shù)組，因為當(dāng)級聯(lián)組件渲染完成后，默認(rèn)用戶是沒有點擊選擇其中任何一項的，只有當(dāng)用戶點擊了某一項后，才會將點擊的這一項添加到selectedItems數(shù)組中，其就是記錄用戶的選擇項。這里需要理解清楚選擇項的概念:
比如我們的級聯(lián)組件有三列，省、市、縣三列，結(jié)合上面的數(shù)據(jù)結(jié)構(gòu)，整個省是一個大對象，即省對象，省對象中有children屬性，里面包括多個子對象，即市對象，市對象中又包括children屬性，里面包括多個子對象，即縣對象，縣對象中不再有children了，具體表示就是:
省對象:
{ "label": "江西", children: [省略...]}
市對象:
{ "label": "贛州", children: [省略...]}
縣對象:
{ "label": "全南縣"}
當(dāng)用戶點擊第一列，那么就將整個省對象添加到selectedItems數(shù)組中的第一項位置，當(dāng)用戶接著點擊了第二列，如省對象中的label為"贛州"的市對象，則將整個市對象添加到selectedItems數(shù)組中的第二項位置，當(dāng)用戶又點擊了第三列，如"贛州"市對象下的label為"全南縣"的縣對象，則將整個縣對象添加到selectedItems數(shù)組中的第三項位置，這樣selectedItems數(shù)組中就保存了用戶選擇的三列數(shù)據(jù)了，然后將三列數(shù)據(jù)中的label取出通過"/"連接起來，即用戶的選擇路徑"江西/贛州/全南縣"。

③ 接下來就是考慮組件拿到數(shù)據(jù)后，如何渲染的問題了？
這里需要用到組件內(nèi)遞歸組件，我們可以左右兩列抽象成一個多帶帶的組件CascaderItem.vue，但是右邊這一列會不會顯示，得看用戶有沒有選擇左邊的項，如果點擊了左邊的項則顯示右邊的列，如果沒有點擊左邊的項則不顯示右邊的列。

還是以省、市、縣三列為例，中間的市這一列，既是省的右列，也是縣的左列，我們已經(jīng)將左右兩列抽象了一個多帶帶的CascaderItem組件，關(guān)鍵是理解省這一列的右邊部分到底是什么？，從表面上看，省這一列的右邊就是一個市列，但是如果右邊僅僅是市這一列的話，那么當(dāng)用戶點擊市這一列中的某項的時候，就無法顯示市右邊的縣列了，所以省這一列的右邊其實又是一個CascaderItem組件，只有這樣點擊市列中的某一項的時候，其右邊的縣列才會顯示出來。所以我們需要在CascaderItem組件內(nèi)遞歸自己，而組件內(nèi)遞歸自己，那么必須給組件添加name屬性，即給組件取一個名字，如:

// CascaderItem.vue

CascaderItem組件組件的渲染數(shù)據(jù)來自于頂層父組件Cascader中的selectedItems數(shù)據(jù)，因為用戶點擊了左側(cè)列中的項后，會將點擊的item項添加到selectedItems中，selectedItems中數(shù)據(jù)變化之后才會顯示右側(cè)的列。
CascaderItem組件需要接收一個level屬性，用來記錄當(dāng)前CascaderItem組件所屬層級，即第幾列，為了方便，我們從0開始表示第一列，即第一層所以Cascader.vue中l(wèi)evel傳入0，后面沒加一層level會加1，如:

// 補全上面的Cascader.vue，渲染出下半部分

CascaderItem組件的左邊部分都監(jiān)聽了一個click事件，當(dāng)用戶點擊左邊的列選項后，需要將當(dāng)前所在level和item對象數(shù)據(jù)傳遞到Cascader父組件中的selectedItems數(shù)組中，以便獲取用戶的選擇路徑，因為單向數(shù)據(jù)流，子組件不能直接修改父組件傳遞過來的數(shù)據(jù)，所以需要去父組件中修改數(shù)據(jù)，這里以事件的方式通知頂層父組件自己更新數(shù)據(jù)。

// CascaderItem.vue給CascaderItem組件添加一個select()方法

export default {
    methods: {
        select(item) { // 處理CascaderItem組件內(nèi)左側(cè)列點擊事件，item為當(dāng)前點擊的對象
            // 向上一級發(fā)射一個change事件，通知上層進行修改，并將當(dāng)前點擊的層級level和item傳遞過去
            this.$emit("change", {level: this.level, item: item});
        }
    }
}

由于CascaderItem是遞歸調(diào)用的，所以現(xiàn)在的組件調(diào)用關(guān)系為: Cascader --> CascaderItem --> CascaderItem --> CascaderItem --> ......
頂層父組件為Cascader，所以CascaderItem也可能是CascaderItem的父組件，CascaderItem組件自身也需要監(jiān)聽change事件，主要就是負責(zé)將數(shù)據(jù)改變信號傳遞到Cascader頂層父組件上，如:

// CascaderItem.vue給CascaderItem組件添加一個change事件處理方法

export default {
    methods: {
        change(newValue) { // 向頂層傳遞數(shù)據(jù)改變信息
            this.$emit("change", newValue);
        }
    }
}

頂層父組件Cascader接收到數(shù)據(jù)改變信號后，就需要改變selectedItems數(shù)據(jù)了，即將用戶的選擇項添加到對應(yīng)的位置，如:

// Cascader.vue 添加change事件處理函數(shù)

export default {
    methods: {
        change(newValue) {
            this.selectedItems.splice(newValue.level, 1, newValue.item); // 替換當(dāng)前點擊位置信息
            this.selectedItems.splice(newValue.level + 1); // 刪除當(dāng)前點擊位置之后的數(shù)據(jù)
        }
    }
}

Cascader組件除了替換掉指定level中的數(shù)據(jù)外，還需要將當(dāng)前l(fā)evel之后的數(shù)據(jù)刪除掉，否則當(dāng)前l(fā)evel之后的數(shù)據(jù)還在，導(dǎo)致右側(cè)路徑仍然保留而顯示不一致。

至此，一個簡單的級聯(lián)組件就實現(xiàn)了，可以在App.vue中直接使用，如:
// App.vue

整個Cascader組件設(shè)計思路就是: 在頂層父組件Cascader中添加一個selectedItems數(shù)組，用于保存用戶點擊的level層級(列序號)和對應(yīng)的item對象，同時用于生成用戶的選擇路徑，當(dāng)用戶點擊了CascaderItem組件的左側(cè)列中某項后，通過層層傳遞事件的方式通知頂層父組件Cascader對其數(shù)據(jù)進行更新，頂層父組件Cascader更新數(shù)據(jù)后，CascaderItem組件從selectedItems中取出對應(yīng)level的item對象，然后獲取item的children并遍歷顯示右側(cè)列