看起来你需要实现的是编辑场景下联动下拉框的回显+动态更新功能——也就是打开编辑页时，下拉框能自动选中用户之前选择的省/地区，并且切换省份时，地区下拉框能同步更新可选列表，同时编辑后的新值能正确绑定到表单里。下面是完整的实现方案，包括自定义下拉组件的修正和父组件的逻辑处理：

1. 先确保自定义form-select组件正确支持双向绑定与事件触发 #

你的父组件用了自定义的form-select，首先得保证这个子组件能正确配合v-model工作，并且能触发选中变化的事件。这里我补全了子组件的代码：

<!-- FormSelect.vue -->
<template>
  <div class="form-group">
    <label :for="id" class="col-sm-2 control-label">{{ label }}</label>
    <div class="col-sm-10">
      <select
        :id="id"
        :name="name"
        :value="value"
        @change="handleChange"
        :required="isRequired"
      >
        <option value="">请选择</option>
        <option
          v-for="option in options"
          :key="option.value"
          :value="option.value"
        >
          {{ option.label }}
        </option>
      </select>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id: String,
    name: String,
    value: [String, Number], // 支持v-model的核心prop，接收父组件绑定的值
    options: {
      type: Array,
      default: () => []
    },
    isRequired: {
      type: Boolean,
      default: false
    },
    label: String,
    model: String // 保留你用到的model属性，按需使用
  },
  methods: {
    handleChange(event) {
      const selectedValue = event.target.value;
      // 触发你父组件监听的`triggerChange`事件，传递选中值
      this.$emit('triggerChange', selectedValue);
      // 同时触发`input`事件，确保`v-model`能自动同步值（可选但推荐）
      this.$emit('input', selectedValue);
    }
  }
};
</script>

2. 父组件完整实现：回显、联动与表单提交 #

接下来补全你的父组件代码，加入编辑数据回显、联动更新的逻辑：

<template>
  <div>
    <form class="form-horizontal" id="form-profile" @submit.prevent="submitFormProfile">
      <!-- 省份下拉框 -->
      <form-select
        id="province"
        name="province"
        v-model="formData.province"
        :options="provinces"
        @triggerChange="changeProvince"
        :is-required="true"
        label="Province"
        model="1"
      ></form-select>

      <!-- 地区下拉框 -->
      <form-select
        id="regency"
        name="regency"
        v-model="formData.regency"
        :options="regencies"
        :is-required="true"
        label="Regency"
        model="1"
      ></form-select>

      <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
          <button type="submit" class="btn btn-primary">保存修改</button>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
import FormSelect from './FormSelect.vue'; // 引入自定义下拉组件

export default {
  components: {
    FormSelect
  },
  data() {
    return {
      formData: {
        province: '', // 存储用户选中的省份ID/值（编辑时从后端获取）
        regency: ''   // 存储用户选中的地区ID/值（编辑时从后端获取）
      },
      provinces: [], // 所有省份的选项列表（格式：[{value: '1', label: '北京'}, ...]）
      regencies: []  // 对应省份的地区选项列表
    };
  },
  mounted() {
    // 页面加载时，先获取省份列表和用户已有的编辑数据
    this.fetchProvinces();
    this.fetchUserProfile();
  },
  methods: {
    // 模拟从后端获取用户已有的省/地区选择
    async fetchUserProfile() {
      // 这里替换成你的实际接口请求
      const response = await this.$axios.get('/api/user/profile');
      const { province, regency } = response.data;
      
      // 赋值给formData，v-model会自动同步到下拉框的选中状态
      this.formData.province = province;
      this.formData.regency = regency;
      
      // 根据已选的省份，获取对应的地区列表
      await this.fetchRegenciesByProvince(province);
    },

    // 模拟从后端获取所有省份列表
    async fetchProvinces() {
      const response = await this.$axios.get('/api/provinces');
      // 把后端返回的数据转换成下拉组件需要的{value, label}格式
      this.provinces = response.data.map(province => ({
        value: province.id,
        label: province.name
      }));
    },

    // 根据省份ID获取对应的地区列表
    async fetchRegenciesByProvince(provinceId) {
      if (!provinceId) {
        // 如果没有选中省份，清空地区列表和选中值
        this.regencies = [];
        this.formData.regency = '';
        return;
      }
      
      const response = await this.$axios.get(`/api/provinces/${provinceId}/regencies`);
      this.regencies = response.data.map(regency => ({
        value: regency.id,
        label: regency.name
      }));
    },

    // 省份切换时触发的联动逻辑
    async changeProvince(selectedProvinceId) {
      // 更新省份对应的地区列表，同时清空之前选中的地区
      await this.fetchRegenciesByProvince(selectedProvinceId);
      this.formData.regency = '';
    },

    // 表单提交逻辑
    async submitFormProfile() {
      try {
        // 直接提交formData即可，v-model已经同步了最新的选中值
        await this.$axios.post('/api/user/profile', this.formData);
        alert('修改保存成功！');
        // 这里可以添加页面跳转或刷新逻辑
      } catch (error) {
        console.error('保存失败:', error);
        alert('保存失败，请稍后重试');
      }
    }
  }
};
</script>

关键要点说明 #

• 双向绑定的正确性：自定义组件通过接收value prop和触发input事件，让v-model能自动同步选中值，不需要手动在事件里赋值（当然你也可以通过triggerChange事件手动更新，不过v-model更简洁）。
• 编辑回显的核心：页面加载时从后端获取用户已选的省/地区值，直接赋值给formData对应的字段，v-model会自动把选中状态同步到下拉框。
• 联动逻辑的严谨性：切换省份时，不仅要更新地区列表，还要清空之前选中的地区值，避免出现“省份已变但地区还是旧的无效选项”的问题。
• 选项格式统一：确保所有下拉选项都使用{value, label}的格式，不管是后端返回的数据还是前端本地定义的，这样组件能统一渲染。

内容的提问来源于stack exchange，提问作者moses toh