Здравствуйте, продолжаю осваивать vue. Решил создать отдельные базовые компоненты для input, textarea и т.д.
Но не могу понять как правильно передать их props в основной компонент?
Покажу на примере input компонента.
Сам компонент input находится в el-input.vue
<template>
<div>
<b-form-group :id="inputGroupId" :label="label" :label-for="inputId">
<input type="text"
:value="title"
:placeholder="placeholder"
:id="inputId"
class="mw-100"
@input="handleChange($event.target.value)">
</b-form-group>
</div>
</template>
<script>
export default {
name: "el-input",
props: {
inputGroupId: String,
inputId: String,
label: {
type: String,
default: 'Label'
},
type: String,
placeholder: String,
title: ''
},
methods: {
handleChange (ev) {
this.$emit('input', ev)
}
}
}
</script>
он подключается в модальное окно, которое также является отдельным компонентом, покажу как подключаю:
<elInput
:input-group-id="inputEl.groupId"
:input-id="inputEl.id"
:label="inputEl.label"
:type="inputEl.type"
:placeholder="inputEl.placeholder"
v-model="inputEl.value"
/>
export default {
components: {
elInput
},
data() {
return {
inputEl: {
label: "Текст",
id: "input-element",
groupId: "input-group-element",
type: "text",
placeholder: "Текст",
},
props: [
'inputEl.value'
]
}
Так вот, как правильно передать inputEl.value, чтобы в основном компоненте я мог работать с текстом в этом поле?