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()" clearable
                 placeholder="请选择省份">
        <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>