Как сделать внутреннее состояние компонента?

Question

[Андрей]

Есть компонент текстового поля, что-то вроде такого:

<template>
  <input :value="modelValue" @input="updateModelValue" />
</template>

<script>
export default {
  props: {
    modelValue: { type: String, default: '' },
  },
  setup() {
    const updateModelValue = (evt) => emit('update:modelValue', evt.target.value);
    return { updateModelValue };
  }
};
</script>

И далее этот компонент используется с v-model. Как сделать такому компоненту внутреннее состояние, чтобы он мог работать без v-model, но при этом корректно работал и при наличии v-model?

Answer 1

[0xD34F]

props: {
  modelValue: {
    type: String,
    default: '',
  },
},
emits: [ 'update:modelValue' ],
setup(props, { emit }) {
  const value = ref('');

  watchEffect(() => value.value = props.modelValue);

  return {
    value,
    onInput: e => emit('update:modelValue', value.value = e.target.value),
  };
},

<input :value="value" @input="onInput">