Vue3中通过Props设置模态框内VueMultiselect初始值的问题

安全阿岳

2026-7-4

问题原因

父组件的letter初始值为空字符串，在mounted钩子中才生成随机字母并赋值。子组件的setup在组件初始化阶段执行，此时props.letter还是空字符串，selectedLetter用这个空值初始化后，后续props.letter更新时，selectedLetter不会自动同步，导致VueMultiselect没有预选值。

解决方案

有两种常用的解决方式：

方式一：监听props变化同步选中值

在子组件的setup中添加watch监听props.letter，当props更新时同步更新selectedLetter：

修改后的Test.vue脚本部分：

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

export default {
  name: 'Test',
  components: {
    VueMultiselect
  },
  props: ['letter'],
  setup(props) {
    const selectedLetter = ref(props.letter);
    
    // 监听props.letter的变化，同步更新选中值
    watch(() => props.letter, (newVal) => {
      selectedLetter.value = newVal;
    });

    return {
      selectedLetter,
      dataSet: ['A', 'B', 'C', 'D']
    };
  }
};
</script>

方式二：提前生成父组件的letter值

把父组件中生成随机字母的逻辑提前到created钩子或者data初始化时，让子组件初始化就能拿到正确的props值：

修改后的App.vue脚本部分：

<script>
import Test from './components/Test.vue'

export default {
  name: 'app',
  components: {
    Test
  },
  created(){ // 换成created，比mounted更早执行
      this.letter = this.generateRandomLetter();
  },
  // 或者直接在data里初始化
  // data() {
  //   return {
  //     letter: this.generateRandomLetter()
  //   };
  // },
  methods: {
    generateRandomLetter() {
      const randomNumber = Math.floor(Math.random() * 4);
      const randomLetter = String.fromCharCode('A'.charCodeAt(0) + randomNumber);
      return randomLetter;
    }
  }
}
</script>

补充说明