省市区三级联动(v-region)

概述：

       最新有一个需求是要求写省市区的，也好久没有写这个了，有现成的轮子我觉得就直接用轮子，省时间，可以多学一些自己感兴趣的领域，话不多说，开始操作，先看效果图，轮子v-region希望能够帮助到大家。v-region

效果图：

   

使用步骤：

•  

  // 用npm或者yarn安装
  npm i -S v-region && yarn add v-region 

•  在main文件引入

  import Vue from 'vue'
  import vRegion from 'v-region'
  Vue.use(vRegion, { global config options... })

•  在页面上引用

  <template>
    <v-region-selects @change="regionChange"/>
  </template>
  
  <script>
  export default {
    methods: {
      //receive selected region data
      regionChange (data) {
        console.log(data) // 打印的是选择的省市区地址
      }
    }
  }
  </script>

• 如果需要有默认省市区需要v-model来绑定，如果是三级而不是四级需要有默认的，那就需要传一个town=" ",不然会没有效果的，四级联动不受影响。
• 如果要做回显，需要传递key，不能传递value,字符串做回显没有效果

总结：

这个轮子真的超级简单，如果可以帮到你那就是缘分，不要吝啬你的点赞，如果遇到问题可以在评论，我会one one one解答 See you soon