Рубрики
HTML Input Vue components Vue project Vue UI Теги

MyInput.vue

Реализация компонента vue

src\components\UI\MyInput.vue

<template>
<input :value="modelValue" @input="updateInput" class="input" type="text">
</template>

<script>
export default {
 name:'my-input',
 props:{
     another:[String],
     modelValue:[String,Number],
 },
 methods:{
 updateInput(event){
     this.$emit('update:modelValue',[event.target.value,this.another]);
 }
}
}
</script>

<style scoped>
.input {
 width:100%;
 border:1px solid teal;
 padding: 10px 15px; 
 margin-top: 15px;
}
</style>
  • Какой то компонент использует
    объект
    переменная data,prop или глобальная
    Функция
    любая доступная функция, в том числе глобальная, передаются параметры из компонента через emit
<my-input :model-value="объект" @update:model-value="Функция"/>

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *