Vue自定义input组件v-model绑定后修改ref无法更新UI如何解决

API 探路者

2026-10-6

问题根因

子组件内部的inputValue仅在初始化时赋值了一次props.value，后续父组件传入的value更新时，内部状态不会自动同步，导致父子状态不一致
clearValue仅修改了子组件内部的inputValue，没有通过emit通知父组件更新v-model绑定的值，父组件的绑定值没有变化，自然不会触发UI刷新
输入事件触发时仅通知了父组件更新，没有同步修改子组件内部的inputValue，也会导致内部状态和实际输入值不一致

修正方案

推荐用可写计算属性来对接v-model，不需要自己维护内部状态的同步逻辑，完整代码如下：

<template>
  <div>
    <input
      :id="id"
      type="text"
      :value="inputValue"
      @input="updateValue"
    />
    <UiIcon
      type="x"
      @click.native="clearValue"
    />
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from '@nuxtjs/composition-api';
import UiIcon from '~/components/ui/UiIcon.vue';

export default defineComponent({
  name: 'UiInput',
  components: { UiIcon },
  props: {
    id: {
      type: String,
      required: true,
    },
    value: {
      type: String,
      default: '',
    },
  },
  setup(props, { emit }) {
    // 用可写计算属性对接v-model，自动同步父子状态
    const inputValue = computed({
      get: () => props.value,
      set: (newVal: string) => emit('input', newVal)
    })

    const clearValue = () => {
      // 直接修改计算属性，自动触发父组件更新
      inputValue.value = '';
    };

    const updateValue = (event: Event) => {
      inputValue.value = (event.target as HTMLInputElement).value;
    };
  
    return {
      updateValue,
      clearValue,
      inputValue,
    };
  },
});