Vue.js
Kundenspezifische Komponenten mit V-Modell
Suche…
Einführung
Oft müssen wir einige Komponenten erstellen, die einige Aktionen / Vorgänge an Daten ausführen, und dies in der übergeordneten Komponente. In den meisten vuex wäre vuex eine bessere Lösung, aber in Fällen, in denen das Verhalten der vuex Komponente nichts mit dem Status der Anwendung zu tun hat, z
Einzelne Speicher für jede Komponente zu haben, wenn sie sich gewöhnen, wird kompliziert.
Bemerkungen
Um ein v-model an einer Komponente zu haben, müssen Sie zwei Bedingungen erfüllen.
- Es sollte eine Requisite namens "value" haben
- Es sollte ein
inputmit dem von den übergeordneten Komponenten erwarteten Wert ausgeben.
<component v-model='something'></component>
ist nur syntaktischer Zucker für
<component
:value="something"
@input="something = $event.target.value"
>
</component>
v-Modell auf einer Zählerkomponente
Hier ist der counter eine untergeordnete Komponente, auf die von einer demo Komponente zugegriffen wird, die eine v-model Komponente ist.
// 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()
}
}
})
Diese untergeordnete Komponente gibt jedes Mal ein result aus, wenn die Methoden sub() oder add() aufgerufen werden.
// 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>
Da v-model , die auf der untergeordneten Komponente ist, eine Stütze mit dem Namen value wurde zur gleichen Zeit gesendet wird , gibt es ein Eingabeereignis auf dem counter , die den Wert der untergeordneten Komponente wiederum liefern.
