如何构建Vue 3 Web组件使value属性与内部状态保持一致？

要确保<my-input>的value属性和内部输入值始终等价，核心是遵循Vue的单向数据流规则，同时实现外部属性与内部状态的双向同步，下面是两种可行方案：

方案一：手动处理Props与事件触发 #

这是最基础的实现方式，能清晰控制同步逻辑：

<template>
  <input 
    :value="internalValue" 
    @input="handleInputChange"
  />
</template>

<script setup>
import { ref, watch } from 'vue'

// 接收外部传入的value属性
const props = defineProps({
  value: {
    type: String,
    default: ''
  }
})

// 定义用于通知外部更新value的事件
const emit = defineEmits(['update:value'])

// 内部维护响应式的输入值
const internalValue = ref(props.value)

// 监听外部value的变化，同步到内部值
watch(() => props.value, (newValue) => {
  internalValue.value = newValue
})

// 处理输入框的输入事件，同步到外部
const handleInputChange = (e) => {
  const inputValue = e.target.value
  internalValue.value = inputValue
  // 通知父组件更新value属性
  emit('update:value', inputValue)
}
</script>

使用组件时，通过绑定value和监听update:value事件实现同步：

<my-input :value="searchValue" @update:value="searchValue = $event"></my-input>

方案二：使用defineModel语法糖（Vue3.3+） #

Vue3.3及以上版本提供了defineModel语法糖，能大幅简化双向绑定代码：

<template>
  <input v-model="valueModel" />
</template>

<script setup>
// 直接定义与value属性绑定的模型，指定name为'value'
const valueModel = defineModel({
  name: 'value',
  default: ''
})
</script>

使用组件时，可直接通过v-model:value实现双向绑定：

<my-input v-model:value="searchValue"></my-input>

关键注意点 #

• 永远不要直接修改props的值：Vue的props是单向数据流，组件内部只能读取，必须通过emit事件通知父组件更新外部属性。
• 监听props变化：确保外部主动修改value时，内部输入值能同步更新，避免出现内外值不一致的情况。

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