安裝：
cnpm install vue-area-linkage --save 組件
cnpm install area-data --save 城市數據來源依賴
使用：
main.js:
import Vue from 'vue';
import VueAreaLinkage from 'vue-area-linkage';
Vue.use(VueAreaLinkage)
組件內:
import { pca, pcaa } from 'area-data'; // 城市數據
import 'vue-area-linkage/dist/index.css'; // 樣式
結構中:
<area-cascader v-if="show" :level="1" type="text" placeholder="請選擇地區" v-model="city" :data="pcaa"></area-cascader>
詳細使用官方API：
https://dwqs.github.io/vue-area-linkage/
https://github.com/dwqs/vue-area-linkage
遇到的問題：
需求中有一個重置的按鈕，本以為清除 v-model 綁定的數據就可以了
結果綁定的數據是修改了，但是頁面顯示的內容沒變。
我又把placeholder數據綁定並修改，也沒變化。
解決方法：
靈光一動想到以前用過的better-scroll 每次頁面更改后需要從新實例化better-scroll才會重新計算。
於是：
1.我先控制v-if把組件銷毀
2.綁定值初始化
3.然后再用settimeout異步0秒顯示
this.show = false;
this.age = [];
var t = setTimeout(() => {this.show = true},0);
解決，缺點就是每次重置都要從新渲染一遍，犧牲點性能，不過暫時的我也想不到別的辦法了。
