Vue.js => Componenti personalizzati con v-model

introduzione

Spesso dobbiamo creare alcuni componenti che eseguono alcune azioni / operazioni sui dati e ne richiediamo nel componente principale. La maggior parte delle volte vuex sarebbe una soluzione migliore, ma nei casi in cui il comportamento del componente figlio non ha nulla a che fare con lo stato dell'applicazione, ad esempio: un dispositivo di scorrimento intervallo, data / ora, lettore di file

Avere singoli negozi per ogni componente ogni volta che vengono utilizzati diventa complicato.

Osservazioni

Per avere il v-model su un componente devi soddisfare due condizioni.

Dovrebbe avere un sostegno chiamato "valore"
Dovrebbe emettere un evento di input con il valore previsto dai componenti principali.

<component v-model='something'></component>

è solo zucchero sintattico per

<component
    :value="something"
    @input="something = $event.target.value"
>
</component>

v-model su un contatore

Qui counter è un componente figlio a cui si accede tramite demo che è un componente principale che utilizza 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()
    }
  }  
})

Questo componente figlio emetterà il result ogni volta che vengono chiamati i metodi sub() o 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>

Dato che v-model è presente sul componente figlio, è stata inviata una puntello con value nome allo stesso tempo, c'è un evento di input sul counter che a sua volta fornisce il valore dal componente figlio.

Modified text is an extract of the original Stack Overflow Documentation

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow

Vue.js
Componenti personalizzati con v-model

Ricerca…

introduzione

Osservazioni

v-model su un contatore