很多時候我們需要使用地址三級聯動，即省市區三級聯動。網上有很多插件，在此介紹Vue的一款地區聯動插件：vue-area-linkage，下面介紹如何使用這個插件實現地址聯動效果：

1.安裝vue-area-linkage插件：npm install --save vue-area-linkage --registry=https://registry.npm.taobao.org --verbose

2.在main.js上進行依賴注入，如下圖所示：

3.在對應vue文件的template模板上寫html標簽，如下圖所示：

4.在對應vue文件的script上進行data默認，如下圖所示：

此時效果已經基本實現，如下圖所示：

注意：該插件有多種聯動效果，我這里做的是省市區街四級聯動，所以 :level='3'。需要其他效果可去網上查詢其他效果代碼，點擊查看。

5.大家可以看到只是出現基本的效果，而樣式看起來很不舒服，這是因為該插件的UI基于Element UI，所以如果需要使用樣式需要依賴Element UI。但是很多情況下設計圖的樣式都是我們自定義的，此時可以自行修改樣式代碼，只需要在文件中寫多一個公共的style文件修改對應的類名樣式來覆蓋之前的樣式代碼即可，需注意這個style文件不可以加上scoped，如下圖紅框所示：

此時效果如下圖所示：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。