vue三级联动下拉菜单

Vue三级联动下拉菜单通常需要使用两个组件，一个是父组件，一个是子组件。父组件用来获取和传递数据，子组件用来展示下拉菜单和响应用户的选择操作。

以下是一个简单的三级联动下拉菜单的示例代码：

父组件代码：

<template>
  <div>
    <select v-model="selectedProvince" @change="getCity">
      <option value="">请选择省份</option>
      <option v-for="province in provinces" :value="province">{{ province }}</option>
    </select>
    <select v-model="selectedCity" @change="getDistrict">
      <option value="">请选择城市</option>
      <option v-for="city in cities" :value="city">{{ city }}</option>
    </select>
    <select v-model="selectedDistrict">
      <option value="">请选择地区</option>
      <option v-for="district in districts" :value="district">{{ district }}</option>
    </select>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      provinces: ['北京', '上海', '广东'],
      cities: [],
      districts: [],
      selectedProvince: '',
      selectedCity: '',
      selectedDistrict: '',
    };
  },
  methods: {
    getCity() {
      // 根据选择的省份获取城市列表
      // 这里省略具体实现
      this.cities = ['北京市', '上海市', '广州市'];
      this.selectedCity = '';
      this.selectedDistrict = '';
    },
    getDistrict() {
      // 根据选择的城市获取地区列表
      // 这里省略具体实现
      this.districts = ['东城区', '黄浦区', '天河区'];
      this.selectedDistrict = '';
    },
  },
};
</script>

子组件代码：

<template>
  <div>
    <select v-model="selectedValue" @change="handleChange">
      <option value="">{{ defaultText }}</option>
      <option v-for="item in options" :value="item.value">{{ item.label }}</option>
    </select>
  </div>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true,
    },
    defaultText: {
      type: String,
      default: '请选择',
    },
    value: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      selectedValue: this.value,
    };
  },
  methods: {
    handleChange() {
      this.$emit('input', this.selectedValue);
    },
  },
  watch: {
    value(val) {
      this.selectedValue = val;
    },
  },
};
</script>

在父组件中，我们使用了三个`<select>`标签来展示下拉菜单，并分别绑定了对应的数据和方法。当用户选择省份时，我们调用`getCity`方法获取城市列表，并清空已选择的城市和地区。当用户选择城市时，我们调用`getDistrict`方法获取地区列表，并清空已选择的地区。最后，用户选择完地区后，我们就可以获取到用户选择的完整地址信息了。

在子组件中，我们使用`<select>`标签来展示下拉菜单，并绑定了传入的`options`数据和默认文本。当用户选择下拉菜单中的选项时，我们通过`handleChange`方法来更新`selectedValue`数据并触发`input`事件，将用户的选择传递给父组件。同时，我们也监听了`value`属性的变化，用来更新子组件中的选项值。