Vue.js => Anpassade komponenter med v-modell

Introduktion

Ofta måste vi skapa några komponenter som utför vissa åtgärder / åtgärder för data och vi kräver det i överkomponenten. De flesta gånger vuex skulle vara en bättre lösning, men i de fall där barnkomponentens beteende inte har något att göra med applikationstillstånd, till exempel: En räckviddsreglage, datum / tidväljare, filläsare

Att ha enskilda butiker för varje komponent varje gång de används blir komplicerat.

Anmärkningar

För att ha v-model på en komponent måste du uppfylla två villkor.

Den borde ha en prop som heter 'värde'
Det bör avge en input med det värde som förväntas av överkomponenterna.

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

är bara syntaktiskt socker för

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

v-modell på en motkomponent

Här counter är en underordnad komponent åtkomst med demo som är en överordnad komponent som använder 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()
    }
  }  
})

Denna underordnade komponent kommer att avge result varje gång sub() eller add() -metoder kallas.

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

Eftersom v-model finns på barnkomponenten skickades en rekvisita med value samtidigt, det finns en inmatningshändelse på counter som i sin tur kommer att ge värdet från barnkomponenten.

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

Vue.js
Anpassade komponenter med v-modell

Sök…

Introduktion

Anmärkningar

v-modell på en motkomponent