Как сделать custom input на vue3?

Для создания custom input компонента в Vue 3 вы можете использовать директиву v-model и emit инструкцию для обработки изменений значения в родительском компоненте. Вот подробное руководство, которое покажет вам, как создать custom input на Vue 3:

1. Создайте новый компонент с помощью синтаксиса определения компонентов Vue 3. Назовем его CustomInput.vue:

<template>
  <input :value="value" @input="updateValue($event.target.value)">
</template>

<script>
export default {
  name: "CustomInput",
  props: {
    value: {
      type: String,
      required: true
    }
  },
  methods: {
    updateValue(newValue) {
      this.$emit("input", newValue);
    }
  }
};
</script>

2. В родительском компоненте, где вы хотите использовать custom input, импортируйте и зарегистрируйте компонент CustomInput:

<template>
  <div>
    <CustomInput v-model="inputValue" />
    <p>Введенное значение: {{ inputValue }}</p>
  </div>
</template>

<script>
import CustomInput from "@/components/CustomInput.vue";

export default {
  name: "ParentComponent",
  components: {
    CustomInput
  },
  data() {
    return {
      inputValue: ""
    };
  }
};
</script>

3. В этом примере мы используем директиву v-model для привязки значения inputValue в родительском компоненте к внутреннему свойству value в компоненте CustomInput.

4. Теперь, когда пользователь вводит значение в CustomInput, изменения будут отражаться в родительском компоненте через v-model.

По сути, кастомный input компонент принимает значение через свою пропс value и возвращает его обратно через emit инструкцию. v-model директива автоматически привязывает значение родительского компонента к внутренней пропс value, а также слушает изменения и вызывает метод updateValue, который обновляет значение в родительском компоненте.