Vue.js => Kundenspezifische Komponenten mit V-Modell

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 input mit 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.

Modified text is an extract of the original Stack Overflow Documentation

Lizenziert unter CC BY-SA 3.0

Nicht angeschlossen an Stack Overflow

Vue.js
Kundenspezifische Komponenten mit V-Modell

Suche…

Einführung

Bemerkungen

v-Modell auf einer Zählerkomponente