Vue.js => Composants personnalisés avec v-model

Introduction

Souvent, nous devons créer des composants qui effectuent des actions / opérations sur des données et nous en avons besoin dans le composant parent. La plupart du temps, la vuex serait une meilleure solution, mais dans les cas où le comportement du composant enfant n'a rien à voir avec l'état de l'application, par exemple: un curseur de plage, un sélecteur de date / heure, un lecteur de fichier

Les magasins individuels pour chaque composant à chaque utilisation deviennent compliqués.

Remarques

Pour avoir v-model sur un composant, vous devez remplir deux conditions.

Il devrait avoir un accessoire nommé "value"
Il doit émettre un événement d' input avec la valeur attendue par les composants parents.

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

est juste du sucre syntaxique pour

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

v-model sur un composant de compteur

Ici counter est un composant enfant accessible par la demo qui est un composant parent utilisant 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()
    }
  }  
})

Ce composant enfant émettra un result chaque fois que les méthodes sub() ou add() seront appelées.

// 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>

Comme v-model est présent sur le composant enfant, un prop avec la value name a été envoyé en même temps, il y a un événement d'entrée sur le counter qui à son tour fournira la valeur du composant enfant.

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

Vue.js
Composants personnalisés avec v-model

Recherche…

Introduction

Remarques

v-model sur un composant de compteur