Vue.js
Пользовательские компоненты с v-образной моделью
Поиск…
Вступление
Часто нам приходится создавать некоторые компоненты, которые выполняют некоторые действия / операции с данными, и мы требуем этого в родительском компоненте. В большинстве случаев vuex будет лучшим решением, но в тех случаях, когда поведение дочернего компонента не имеет ничего общего с состоянием приложения, например: слайдер диапазона, выбор даты / времени, программа чтения файлов
Наличие отдельных магазинов для каждого компонента каждый раз, когда они используются, усложняется.
замечания
Чтобы иметь v-model на компоненте, вам нужно выполнить два условия.
- Он должен иметь прозвище с именем 'value'
- Он должен излучать
inputсобытие со значением, ожидаемым родительскими компонентами.
<component v-model='something'></component>
это просто синтаксический сахар для
<component
:value="something"
@input="something = $event.target.value"
>
</component>
v-модель на счетчике
Здесь counter - дочерний компонент, к которому обращается demo являющаяся родительским компонентом с использованием v-model .
// child component
Vue.component('counter', {
template: `<div><button @click='add'>+1</button>
<button @click='sub'>-1</button>
<div>this is inside the child component: {{ result }}</div></div>`,
data () {
return {
result: 0
}
},
props: ['value'],
methods: {
emitResult () {
this.$emit('input', this.result)
},
add () {
this.result += 1
this.emitResult()
},
sub () {
this.result -= 1
this.emitResult()
}
}
})
Этот дочерний компонент будет выдавать result каждый раз, когда вызываются методы sub() или add() .
// parent component
new Vue({
el: '#demo',
data () {
return {
resultFromChild: null
}
}
})
// parent template
<div id='demo'>
<counter v-model='resultFromChild'></counter>
This is in parent component {{ resultFromChild }}
</div>
Так как v-model присутствует на компоненте ребенка, опора с именем value был послан в то же время, является входным событием на counter , который , в свою очередь обеспечивают значение от компонента ребенка.
