Vue.js
Aangepaste componenten met v-model

CSS firebase HTML JavaScript jQuery Laravel Node.js PHP twitter-bootstrap TypeScript
Zoeken…


Invoering

Vaak moeten we enkele componenten maken die enkele acties / bewerkingen op gegevens uitvoeren en dat vereisen we in de bovenliggende component. Meestal zou vuex een betere oplossing zijn, maar in gevallen waarin het gedrag van de onderliggende component niets te maken heeft met de applicatiestatus, bijvoorbeeld: een bereikschuifregelaar, datum / tijdkiezer, bestandslezer

Het is ingewikkeld om voor elke component afzonderlijke winkels te hebben.

Opmerkingen

Om een v-model op een component te hebben, moet u aan twee voorwaarden voldoen.

  1. Het moet een prop hebben die 'waarde' heet
  2. Het moet een input uitzenden met de waarde die wordt verwacht door de bovenliggende componenten. 
<component v-model='something'></component>

is gewoon syntactische suiker voor 

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

v-model op een tegencomponent

Hier is de counter een onderliggend onderdeel dat toegankelijk is via een demo , een bovenliggend onderdeel dat het 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()
    }
  }  
})

Deze onderliggende component zendt result telkens wanneer methoden sub() of add() worden aangeroepen. 

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

Aangezien v-model aanwezig op het kind component, een prop met name value gestuurd op hetzelfde moment is er een invoergebeurtenis op de counter die op hun beurt over een waarde uit de kindercomponent.



Modified text is an extract of the original Stack Overflow Documentation
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow