在开发vue单页项目时，需要使用地区选择组件，在网上下载了一个三级联动组件（原文我忘了地址，很久之前找的），修改之后分享给大家，我的GitHub上有项目：https://github.com/leileibrother/wechat-vue

地区选择的样式如下：

在personal文件夹中的area文件是原代码文件，可以在这个文件里修改页面的样式

在需要地区选择的页面引入这个已经写好的组件（我写的页面是addAddress.vue这个）：

然后在页面上把这个引入的组件写上去

<area-btn v-on:getValue="have"></area-btn>

这里用到了子组件向父组件传值的问题，我在父组件里定义了一个have函数来接收子组件传的值

have(data) {
    this.city = data;
    console.log(this.city);
},

在子组件里有个向父组件传值的函数，这样子组件里选择好的地区就可以传到父组件里了。

//给父组件传值
    sendValue(val) {
        this.$emit('getValue',val);
    }

大致的写法如上，area.vue文件的代码太多，这里也不好直接贴出来，可以到GitHub上下载下来看看，有什么问题欢迎一起探讨。