Vue组件向multiselect传递props值显示异常问题咨询

核心问题1：:value与v-model绑定冲突 #

v-model是Vue的语法糖，本质等价于:value="XXX"加上@input="XXX = $event"。你同时给multiselect绑定了:value="defaultValue"和v-model="value"，这会导致组件的value被两个数据源控制，初始值的渲染逻辑混乱，这是多数情况下无法显示默认值的直接原因。

核心问题2：异步Prop导致初始化值为空 #

如果父组件传入的station是异步获取的（比如从后端接口请求），那么自定义组件初始化时，this.defaultValue还未拿到实际值，此时data里的value会被初始化为undefined或空值。后续defaultValue更新时，因为没有监听变化，value也不会同步更新，只有重启npm时刚好数据已加载完成，才偶尔能显示。

修正后的代码 #

模板部分（移除:value绑定）

<template>
  <div>
     <multiselect
       v-model="value"
       <!-- 其他配置项 -->
     ></multiselect>
  </div>
</template>

脚本部分（添加Prop监听）

props: [/* 其他props */, "defaultValue"],
data() {
    return {
      value: this.defaultValue,
    }
  },
watch: {
  // 监听defaultValue变化，同步更新value
  defaultValue(newVal) {
    this.value = newVal;
  }
}

这样修改后，multiselect会通过v-model绑定到组件内部的value，同时通过watch确保当父组件的defaultValue更新（比如异步数据加载完成）时，value能同步更新，从而正确显示初始值，同时也支持正常修改。

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