vue单页的三级联动地区选择组件

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

地区选择的样式如下：







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







在需要地区选择的页面引入这个已经写好的组件（我写的页面是addAddress.vue这个）：
import areaBtn from './area.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上下载下来看看，有什么问题欢迎一起探讨。

• « 上一篇：《程序员情商》如何在互联网公司与同事领导相处
• » 下一篇：sparkstreaming对接kafka出现的数据积压问题