Для создания 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, который обновляет значение в родительском компоненте.