Для получения значения из слота формы в методе вам необходимо использовать события и пропсы.
- Создайте форму с использованием слота, передавая в него необходимое значение:
<form>
<slot name="myInput"></slot>
</form>
- Внутри слота определите необходимый инпут и добавьте привязку его значения к пропсу:
<div>
<input v-model="myValue">
</div>
- В родительском компоненте, использующем форму, определите пропс для получения значения из слота:
Vue.component('my-form', {
props: ['value'],
template: `
<form>
<slot :myValue="value"></slot>
</form>
`
});
- При изменении значения внутри слота, создайте событие и отправляйте его вверх по иерархии компонентов:
Vue.component('my-form', {
props: ['value'],
template: `
<form>
<slot :myValue="value" @input="updateValue"></slot>
</form>
`,
methods: {
updateValue(event) {
this.$emit('input', event.target.value);
}
}
});
- В родительском компоненте, использующем форму, определите значение и обработчик события изменения значения:
new Vue({
el: '#app',
data: {
inputValue: ''
},
methods: {
handleChangeValue(value) {
this.inputValue = value;
}
}
});
- Используйте форму и привязку значения в родительском компоненте:
<div id="app">
<my-form v-model="inputValue">
<template slot="myInput">
<input :value="myValue" @input="$emit('input', $event.target.value)">
</template>
</my-form>
</div>
Теперь, при изменении значения в инпуте формы, оно будет передаваться в родительский компонент и быть доступным в методе handleChangeValue.