Vue3数据响应式问题：vue-multiselect加载localStorage数据异常

你的问题核心在于拆分后的子组件与父组件的状态没有实现正确的双向绑定，导致父组件从localStorage加载数据后，子组件无法同步更新。以下是修正后的代码和说明：

1. 修改子组件（func.js） #

将子组件改为接收父组件传递的状态，并通过事件通知父组件更新，不再维护内部的selected状态：

import VueMultiselect from 'vue-multiselect'

export const TimeframeDropdown = {
  // 接收父组件传递的绑定值
  props: {
    modelValue: {
      type: Array,
      required: true
    }
  },
  // 声明要触发的更新事件
  emits: ['update:modelValue'],
  data() {
    return {
      timeframes: ["5m", "15m"]
    };
  },
  render() {
    return (
      <VueMultiselect
        v-model={this.modelValue}
        options={this.timeframes}
        multiple={true}
        // 当选中值变化时，触发事件通知父组件更新
        onUpdate:modelValue={(newVal) => this.$emit('update:modelValue', newVal)}
      />
    );
  },
};

// 其他下拉组件同理修改，比如AnotherDropdown：
export const AnotherDropdown = {
  props: {
    modelValue: {
      type: Array,
      required: true
    }
  },
  emits: ['update:modelValue'],
  data() {
    return {
      // 你的选项数据
      options: []
    };
  },
  render() {
    return (
      <VueMultiselect
        v-model={this.modelValue}
        options={this.options}
        multiple={true}
        onUpdate:modelValue={(newVal) => this.$emit('update:modelValue', newVal)}
      />
    );
  },
};

2. 修改父组件（page.vue） #

统一维护formData状态，通过v-model绑定到每个子组件，并修正存储/加载逻辑：

<TimeframeDropdown v-model="formData.multiselect_input" />
<AnotherDropdown v-model="formData.another_multiselect_input" />
<YetAnotherDropdown v-model="formData.yet_another_multiselect_input" />
<button @click="store">store</button>
<button @click="load">load</button>

<script>
import * as t from './func.js'

export default {
  components: {
    ...t,
  },
  data() {
    return {
      // 统一管理所有多选组件的状态，初始化值与子组件默认值保持一致
      formData: {
        multiselect_input: ["5m"],
        another_multiselect_input: [],
        yet_another_multiselect_input: []
      }
    }
  },
  methods: {
    store() {
      // 存储整个formData，而非单个字段
      localStorage.setItem('test_key', JSON.stringify(this.formData));
    },
    load() {
      const savedData = localStorage.getItem('test_key');
      // 避免空值解析报错
      if (savedData) {
        this.formData = JSON.parse(savedData);
      }
    },
  }
}
</script>

关键说明 #

• 子组件不再独立维护状态，而是通过props接收父组件的formData字段，通过emit事件将选择变化同步回父组件，实现双向绑定。
• 父组件的store方法存储整个formData对象，确保所有多选组件的状态都能被保存；load方法恢复完整的formData，所有子组件会自动同步更新。
• 原代码中watch里直接访问formData是错误的，子组件无法直接获取父组件的状态，必须通过组件通信机制传递。

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