vue3 select 联动

Vue3 Select 联动可以通过监听 Select 组件的 change 事件实现。具体实现步骤如下：

1. 在 data 中定义需要联动的数据列表，如下：

data() {
  return {
    provinces: [
      { value: 'jilin', label: '吉林省' },
      { value: 'liaoning', label: '辽宁省' },
      { value: 'hebei', label: '河北省' }
    ],
    cities: {
      'jilin': [
        { value: 'changchun', label: '长春市' },
        { value: 'jilin', label: '吉林市' },
        { value: 'siping', label: '四平市' }
      ],
      'liaoning': [
        { value: 'shenyang', label: '沈阳市' },
        { value: 'dalian', label: '大连市' },
        { value: 'anshan', label: '鞍山市' }
      ],
      'hebei': [
        { value: 'shijiazhuang', label: '石家庄市' },
        { value: 'tangshan', label: '唐山市' },
        { value: 'baoding', label: '保定市' }
      ]
    },
    selectedProvince: '',
    selectedCity: ''
  }
}

2. 在模板中使用 Select 组件，如下：

<template>
  <div>
    <select v-model="selectedProvince" @change="onProvinceChange">
      <option value="">请选择省份</option>
      <option v-for="province in provinces" :value="province.value">{{ province.label }}</option>
    </select>
    <select v-model="selectedCity">
      <option value="">请选择城市</option>
      <option v-for="city in cities[selectedProvince]" :value="city.value">{{ city.label }}</option>
    </select> 
  </div>
</template>

3. 在 methods 中定义 onProvinceChange 方法，该方法会在省份选择发生变化时被调用，根据选中的省份，更新城市列表数据，如下：

methods: {
  onProvinceChange() {
    this.selectedCity = ''  // 清空城市选择
  }
}

这样，就可以实现 Vue3 Select 的联动效果了。