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上下载下来看看,有什么问题欢迎一起探讨。




阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭