vue实现多个下拉框联动（一）

要实现Vue3中多个下拉框的联动，可以使用v-model指令和watch特性来实现。

首先，在Vue组件中定义多个下拉框的数据和选项列表：

<template>
  <div>
    <select v-model="selectedOption1">
      <option v-for="option in options1" :value="option">{
   {
    option }}</option>
    </select>

    <select v-model="selectedOption2">
      <option v-for="option in options2" :value="option">{
   {
    option }}</option>
    </select>

    <select v-model="selectedOption3">
      <option v-for="option in options3" :value="option">{
   {
    option }}</option>
    </select>
  </div>
</template>

<script>
import {
    ref, watch } from 'vue';

export default {
   
  setup() {
   
    const selectedOption1 = ref('');
    const selectedOption2 = ref('');
    const selectedOption3 = ref('');

    const options1 = ['Option 1', 'Option 2', 'Option 3'];
    const options2 = ['Option A', 'Option B', 'Option C'];
    const options3 = ['Option X', 'Option Y', 'Option Z'];

    watch(selectedOption1, (newValue) => {
   
      // 根据选择的选项更新其他下拉框的选项列表
      if (newValue === 'Option 1') {
   
        options2.value = ['Option A', 'Option B', 'Option C'];
        options3.value = ['Option X', 'Option Y', 'Option Z'];
      } else if (newValue === 'Option 2') {
   
        options2.value = ['Option D', 'Option E', 'Option F'];
        options3.value = ['Option X', 'Option Y', 'Option Z'];
      } else if (newValue === 'Option 3') {
   
        options2.value = ['Option G', 'Option H', 'Option I'];
        options3.value = ['Option X', 'Option Y', 'Option Z'];
      }

      // 重置其他下拉框的选中值
      selectedOption2.value = '';
      selectedOption3.value = '';
    });

    return {
   
      selectedOption1,
      selectedOption2,
      selectedOption3,
      options1,
      options2,
      options3
    };
  }
};
</script>

使用ref函数创建了多个响应式的变量selectedOption1、selectedOption2和selectedOption3，用于保存下拉框的选中值。然后，定义多个选项列表options1、options2和options3。

接下来，使用watch函数来监听selectedOption1的变化。当selectedOption1的值发生变化时，可以根据选择的选项更新其他下拉框的选项列表，并重置其他下拉框的选中值。

最后，在模板中使用v-model指令将下拉框的选中值与selectedOption1、selectedOption2和selectedOption3绑定起来，同时使用v-for指令遍历选项列表。

这样，当选择一个选项时，其他下拉框的选项列表和选中值就会根据选择的选项进行更新，实现了多个下拉框的联动效果。