vue用mint-ui的picker组件封装一个省市区三级联动组件

    最近公司在用vue做项目，然后需要做一个省市区的三级联动的功能，于是研究了一下mint-ui，写了效果如下的一个组件

首先我们的数据文件如下形式,将他分开成一个js文件并将数据暴露出来：

cityData.js

export const CITY_DATA= [
  {
    "id": "110000",
    "name": "北京市",
    "city": [
      {
        "id": "110100",
        "name": "北京市",
        "district": [
          {
            "id": "110101",
            "name": "东城区"
          },{
            "id": "110102",
            "name": "西城区"
          }]
       }]
}]

然后子组件需要实现三级联动的效果，并将用户的选择结果（选择的城市及对应的id）返回到父组件，内容如下：

linkage.vue

父组件只需要引入子组件，并得到用户选择的结果，展示在自己的页面上，内容如下:

parent.vue

到这里，我们的三级联动组件就封装好了，这种公用的组件可以放到项目公用的文件里，以后在其他组件中也可以调用

转载于:https://my.oschina.net/u/3689373/blog/1633773