封装uiv日期选择器时组件内v-model无法更新的问题

1. Vue的v-model本质是**value属性 + input事件**的语法糖，自定义组件实现双向绑定必须遵循这个逻辑。你封装的组件中，只有date字段直接对接了uiv date-picker的原生v-model，继承了它的双向绑定逻辑，所以能正常同步；而stage、date_stage这类自定义字段，既没有通过props接收父组件的初始值，也没有在输入变化时向外触发更新事件，导致输入操作无法同步到组件实例的data，父组件也无法感知变化。
2. 直接通过root_vue.$children[0].date_stage修改子组件内部状态的方式，绕过了Vue的响应式通信机制，属于非规范操作，只能单向更新UI，无法建立双向绑定。

方案1：为自定义字段实现规范的双向绑定 #

如果需要让stage、date_stage也支持父组件的双向绑定，按以下步骤处理：

1. 定义props并承接内部状态

<script>
export default {
  props: {
    // 对接uiv date-picker的v-model
    value: {
      type: Date,
      default: null
    },
    // 自定义字段的props
    stage: {
      type: String,
      default: ''
    },
    dateStage: {
      type: String,
      default: ''
    }
  },
  data() {
    // 用内部变量承接props，避免直接修改props
    return {
      innerStage: this.stage,
      innerDateStage: this.dateStage,
      innerDate: this.value
    }
  },
  watch: {
    // 监听props变化，同步到内部变量
    stage(newVal) {
      this.innerStage = newVal
    },
    dateStage(newVal) {
      this.innerDateStage = newVal
    },
    value(newVal) {
      this.innerDate = newVal
    },
    // 监听内部变量变化，向外触发更新事件
    innerStage(newVal) {
      this.$emit('update:stage', newVal)
    },
    innerDateStage(newVal) {
      this.$emit('update:dateStage', newVal)
    },
    innerDate(newVal) {
      this.$emit('input', newVal)
    }
  }
}
</script>

2. 模板绑定内部变量

<template>
  <div>
    <input class="tbox1" v-model="innerStage" />
    <date-picker v-model="innerDate" />
    <input class="tbox3" v-model="innerDateStage" />
  </div>
</template>

3. 父组件使用.sync修饰符实现双向绑定

<your-date-picker 
  v-model="parentDate"
  :stage.sync="parentStage"
  :date-stage.sync="parentDateStage"
/>

方案2：自定义字段仅内部使用的响应式修复 #

如果stage、date_stage不需要和父组件同步，仅作为组件内部状态：

• 确保组件data中正确声明响应式数据：

data() {
  return {
    stage: '',
    date_stage: '',
    date: null
  }
}

• 模板直接绑定这些data属性：

<input class="tbox1" v-model="stage" />
<date-picker v-model="date" />
<input class="tbox3" v-model="date_stage" />

如果仍无法同步，检查是否存在破坏响应式的操作（比如用Object.assign覆盖data属性），可通过this.$set手动确保响应式，或重新梳理数据初始化逻辑。

额外注意 #

不要直接操作子组件内部状态（如root_vue.$children[0].date_stage），这种方式会导致组件状态混乱，应始终通过props和事件传递数据。

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