Vue3中能否将v-model绑定为计算属性？如何实现？

DevOps 小满

2026-7-30

Vue3中v-model绑定计算属性的可行性与操作方法

在Vue3中完全可以将v-model绑定到计算属性上，但有个关键前提：这个计算属性必须同时定义get和set方法——毕竟v-model是双向绑定，既要能读取值（靠get方法），也要能接收并处理更新（靠set方法）。

具体操作步骤

定义包含get和set的计算属性
- get方法：返回你要绑定的底层响应式数据的值，逻辑和普通只读计算属性一致。
- set方法：接收v-model传递来的新值，然后更新对应的底层数据源（比如组件里的ref或reactive变量），还可以在这里添加额外的处理逻辑（比如格式校验、值转换）。
直接在组件上用v-model绑定这个计算属性即可，和绑定普通响应式变量无区别。

完整示例代码

父组件代码

<template>
  <MyComponent v-model="thisComputed" />
  <!-- 验证双向绑定效果 -->
  <p>当前绑定值：{{ thisComputed }}</p>
</template>

<script setup>
import { ref, computed } from 'vue'
import MyComponent from './MyComponent.vue'

// 底层响应式数据源
const rawValue = ref('初始内容')

// 带读写逻辑的计算属性
const thisComputed = computed({
  get() {
    return rawValue.value
  },
  set(newValue) {
    // 这里可以添加额外处理，比如去除首尾空格
    rawValue.value = newValue.trim()
  }
})
</script>

子组件（MyComponent.vue）代码

自定义组件需遵循Vue3的v-model规范，接收modelValue prop并触发update:modelValue事件：

<template>
  <input 
    type="text"
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>