vue中组件传值 引用页面与组件页面绑定参数 vue省市地区街道级联选择组件

在做后台的时候需要用到地区级联选择器 然后就自己封装了一个

其中 组件页面中

export default {props: {		//使用value接收引用页面的绑定值value: [String]},watch: {value: {handler(val) {//val 以及 this.value 都可以获取到引用页面的绑定值},deep: true,immediate: true}},
}
//this.$emit("input", this.changeForm()); 这句代码是给引用页面绑定值返回内容

完整地区json文件在网盘中

链接：https://pan.quark.cn/s/0b70e60fd377
提取码：4sSe

下面是完整代码：

引用页面中

<select-address v-model="form.applicableRange"/>

main.js中注册组件

import SelectAddress from '@/components/SelectAddress'Vue.component('SelectAddress', SelectAddress)

组件页面

<template><div class="selectAddress"><el-form :model="form"><el-select v-model="form.provincial" @change="updateProvincials()" clearableplaceholder="请选择省份"><el-option v-for="provincial in provincials" :key="provincial.label" :value="provincial.label":label="provincial.label"/></el-select><el-select v-model="form.municipal" @change="updateMunicipals()"placeholder="请选择城市"><el-option v-for="municipal in municipals" :key="municipal.label" :value="municipal.label":label="municipal.label"/></el-select><el-select v-model="form.regional" @change="updateRegionals()"placeholder="请选择地区"><el-option v-for="regional in regionals" :key="regional.label" :value="regional.label":label="regional.label"/></el-select><el-select v-model="form.streets" @change="updateStreetss()"placeholder="请选择街道"><el-option v-for="streets in streetss" :key="streets.label" :value="streets.label" :label="streets.label"/></el-select></el-form></div>
</template>
<script>
const options = require("@/assets/images/pcas-code.json");
export default {props: {value: [String]},data() {return {form: {provincial: null,municipal: null,regional: null,streets: null,},provincials: options,municipals: [],regionals: [],streetss: [],}},watch: {value: {handler(val) {if (val) {const list = this.value.split(' ');if(list.length == 1){this.form.provincial = list[0];this.updateProvincials();}else if(list.length == 2){this.form.provincial = list[0];this.updateProvincials();this.form.municipal = list[1];this.updateMunicipals();}else if(list.length == 3){this.form.provincial = list[0];this.updateProvincials();this.form.municipal = list[1];this.updateMunicipals();this.form.regional = list[2];this.updateRegionals();}} else {this.reset();return [];}},deep: true,immediate: true}},mounted() {},created() {},computed: {},methods: {reset() {this.form = {provincial: null,municipal: null,regional: null,streets: null}},updateProvincials() {this.form.municipal = "";this.form.regional = "";this.form.streets = "";this.municipals = [];this.regionals = [];this.streetss = [];this.$emit("input", this.changeForm());if(this.form.provincial){this.municipals = this.provincials.find(provincial => provincial.label == this.form.provincial).children;}},updateMunicipals() {this.form.regional = "";this.form.streets = "";this.regionals = [];this.streetss = [];this.$emit("input", this.changeForm());this.regionals = this.municipals.find(municipal => municipal.label == this.form.municipal).children;},updateRegionals() {this.form.streets = "";this.streetss = [];this.$emit("input", this.changeForm());this.streetss = this.regionals.find(regional => regional.label == this.form.regional).children;},updateStreetss() {this.$emit("input", this.changeForm());},changeForm(){let applicableRange = "";if(this.form.provincial){applicableRange = this.form.provincial}if(this.form.provincial && this.form.municipal){applicableRange = this.form.provincial + " " + this.form.municipal}if(this.form.provincial && this.form.municipal && this.form.regional){applicableRange = this.form.provincial + " " + this.form.municipal + " " + this.form.regional}if(this.form.provincial && this.form.municipal && this.form.regional && this.form.streets){applicableRange = this.form.provincial + " " + this.form.municipal + " " + this.form.regional + " " + this.form.streets}return applicableRange;}},
}
</script><style scoped lang="scss">
.el-select {width: 18%;margin-left: 1%;
}
</style>