vue实现select联动

Vue 实现 Select 联动

在 Vue 中实现 Select 联动通常涉及父子组件间的数据传递和事件监听。以下是几种常见的方法：

方法一：使用 v-model 和 watch

通过 v-model 绑定父组件的值，并在子组件中使用 watch 监听变化。

<template>
  <div>
    <select v-model="selectedParent" @change="handleParentChange">
      <option v-for="option in parentOptions" :value="option.value" :key="option.value">
        {{ option.label }}
      </option>
    </select>
    <select v-model="selectedChild">
      <option v-for="option in childOptions" :value="option.value" :key="option.value">
        {{ option.label }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedParent: '',
      selectedChild: '',
      parentOptions: [
        { value: '1', label: 'Parent 1' },
        { value: '2', label: 'Parent 2' }
      ],
      childOptions: []
    };
  },
  watch: {
    selectedParent(newVal) {
      this.updateChildOptions(newVal);
    }
  },
  methods: {
    handleParentChange() {
      this.selectedChild = '';
    },
    updateChildOptions(parentValue) {
      if (parentValue === '1') {
        this.childOptions = [
          { value: '1-1', label: 'Child 1-1' },
          { value: '1-2', label: 'Child 1-2' }
        ];
      } else if (parentValue === '2') {
        this.childOptions = [
          { value: '2-1', label: 'Child 2-1' },
          { value: '2-2', label: 'Child 2-2' }
        ];
      } else {
        this.childOptions = [];
      }
    }
  }
};
</script>

方法二：使用 computed 属性

通过 computed 属性动态计算子选项，减少手动更新逻辑。

<template>
  <div>
    <select v-model="selectedParent">
      <option v-for="option in parentOptions" :value="option.value" :key="option.value">
        {{ option.label }}
      </option>
    </select>
    <select v-model="selectedChild">
      <option v-for="option in childOptions" :value="option.value" :key="option.value">
        {{ option.label }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedParent: '',
      selectedChild: '',
      parentOptions: [
        { value: '1', label: 'Parent 1' },
        { value: '2', label: 'Parent 2' }
      ]
    };
  },
  computed: {
    childOptions() {
      if (this.selectedParent === '1') {
        return [
          { value: '1-1', label: 'Child 1-1' },
          { value: '1-2', label: 'Child 1-2' }
        ];
      } else if (this.selectedParent === '2') {
        return [
          { value: '2-1', label: 'Child 2-1' },
          { value: '2-2', label: 'Child 2-2' }
        ];
      } else {
        return [];
      }
    }
  }
};
</script>

方法三：使用事件总线或 Vuex

对于复杂场景，可以通过事件总线或 Vuex 管理状态，实现跨组件联动。

<template>
  <div>
    <select v-model="selectedParent" @change="updateChildOptions">
      <option v-for="option in parentOptions" :value="option.value" :key="option.value">
        {{ option.label }}
      </option>
    </select>
    <child-select :options="childOptions" v-model="selectedChild" />
  </div>
</template>

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

export default {
  components: {
    ChildSelect
  },
  data() {
    return {
      selectedParent: '',
      selectedChild: '',
      parentOptions: [
        { value: '1', label: 'Parent 1' },
        { value: '2', label: 'Parent 2' }
      ],
      childOptions: []
    };
  },
  methods: {
    updateChildOptions() {
      if (this.selectedParent === '1') {
        this.childOptions = [
          { value: '1-1', label: 'Child 1-1' },
          { value: '1-2', label: 'Child 1-2' }
        ];
      } else if (this.selectedParent === '2') {
        this.childOptions = [
          { value: '2-1', label: 'Child 2-1' },
          { value: '2-2', label: 'Child 2-2' }
        ];
      } else {
        this.childOptions = [];
      }
    }
  }
};
</script>

方法四：使用动态组件

通过动态组件实现更灵活的联动逻辑。

<template>
  <div>
    <select v-model="selectedParent">
      <option v-for="option in parentOptions" :value="option.value" :key="option.value">
        {{ option.label }}
      </option>
    </select>
    <component :is="currentChildComponent" :options="childOptions" v-model="selectedChild" />
  </div>
</template>

<script>
import ChildSelect1 from './ChildSelect1.vue';
import ChildSelect2 from './ChildSelect2.vue';

export default {
  components: {
    ChildSelect1,
    ChildSelect2
  },
  data() {
    return {
      selectedParent: '',
      selectedChild: '',
      parentOptions: [
        { value: '1', label: 'Parent 1' },
        { value: '2', label: 'Parent 2' }
      ],
      childOptions: []
    };
  },
  computed: {
    currentChildComponent() {
      return this.selectedParent === '1' ? 'ChildSelect1' : 'ChildSelect2';
    }
  }
};
</script>

以上方法可以根据具体需求选择适合的实现方式。