Vue使用distpicker插件实现省市级下拉框三级联动

npm install v-distpicker --save

为了方便，我们可以直接在入口文件(main.js)中进行全局注册，这样不管哪个组件想要使用，就可以引入并直接使用了

// 引用地区选择器distpicker插件
import vdistpicker from 'v-distpicker'
// 注册全局地区选择器distpicker组件
Vue.component('v-distpicker', vdistpicker);

使用distpicker

比如我现在这个组件想要使用我们注册的公共distpicker 组件，我们就可以直接引用过来进行使用了。

<v-distpicker></v-distpicker>

例子：

<v-distpicker
  province=""
  city=""
  area=""
  @province="onChangeProvince"
  @city="onChangeCity"
  @area="onChangeArea"
/>
<button @click="onSubmit">提交</button>

data{
province: '', // 省
city: '', // 市
area: '' // 区
}
methods: {
  onSubmit() {
    console.log(this.province, this.city, this.area)
  },
  onChangeProvince(province) {
    this.province = province.value
  }, onChangeCity(city) {
    this.city = city.value
  }, onChangeArea(area) {
    this.area = area.value
  }
}