Vue.js：使用defineModel宏无法触发状态更新的问题

可以用更简洁的v-model实现双向绑定，核心是避免直接修改传入对象的属性，而是创建新对象并通过emit更新父组件的引用，这样既符合Vue单向数据流原则，也能确保store状态正确更新。

Vue 3 实现方式 #

方式1：使用defineModel语法糖（最简洁） #

子组件（通用输入组件）：

<template>
  <input 
    :value="model.name" 
    @input="handleInput"
  />
</template>

<script setup>
// 自动绑定modelValue prop和update:modelValue事件
const model = defineModel()

const handleInput = (e) => {
  // 创建新对象替换原对象，确保引用更新
  model.value = { ...model.value, name: e.target.value }
}
</script>

父组件使用：

<template>
  <GeneralInput v-model="storeData" />
</template>

<script setup>
import { ref } from 'vue'
// 假设storeData是从状态管理工具获取的响应式对象
const storeData = ref({ name: '初始值' })
</script>

方式2：手动定义prop和emit #

如果不想用语法糖，也可以手动配置：

<template>
  <input 
    :value="modelValue.name" 
    @input="handleInput"
  />
</template>

<script setup>
const props = defineProps({
  modelValue: {
    type: Object,
    required: true
  }
})
const emit = defineEmits(['update:modelValue'])

const handleInput = (e) => {
  const newValue = { ...props.modelValue, name: e.target.value }
  emit('update:modelValue', newValue)
}
</script>

Vue 2 实现方式 #

通过model选项自定义v-model的绑定逻辑：
子组件：

<template>
  <input 
    :value="value.name" 
    @input="handleInput"
  />
</template>

<script>
export default {
  model: {
    prop: 'value',
    event: 'input'
  },
  props: {
    value: {
      type: Object,
      required: true
    }
  },
  methods: {
    handleInput(e) {
      const newValue = { ...this.value, name: e.target.value }
      this.$emit('input', newValue)
    }
  }
}
</script>

父组件使用：

<template>
  <GeneralInput v-model="storeData" />
</template>

<script>
export default {
  data() {
    return {
      storeData: { name: '初始值' }
    }
  }
}
</script>

核心原理 #

直接修改传入对象的属性属于原地修改，虽然属性值会变，但对象引用未更新——如果使用Pinia/Vuex等状态管理工具，这种修改可能绕过状态更新的规范流程，导致store无法捕获变化；而创建新对象并emit，本质是让父组件（或store）替换原对象的引用，既符合Vue响应式检测机制，也能保证状态管理的可追溯性。

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