Vue.js => Komponenty niestandardowe z modelem v

Wprowadzenie

Często musimy tworzyć pewne komponenty, które wykonują pewne działania / operacje na danych i wymagamy tego w komponencie nadrzędnym. W większości przypadków vuex byłoby lepszym rozwiązaniem, ale w przypadkach, w których zachowanie komponentu potomnego nie ma nic wspólnego ze stanem aplikacji, na przykład: suwak zakresu, selektor daty / godziny, czytnik plików

Posiadanie osobnych sklepów dla każdego komponentu za każdym razem, gdy się zużywa, staje się skomplikowane.

Uwagi

Aby mieć v-model na komponencie, musisz spełnić dwa warunki.

Powinien mieć rekwizyt o nazwie „wartość”
Powinien on emitować zdarzenie input o wartości oczekiwanej przez komponenty nadrzędne.

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

jest po prostu cukrem syntaktycznym

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

Model v na komponencie licznika

Tutaj counter jest komponentem potomnym dostępnym przez demo który jest komponentem nadrzędnym przy użyciu 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()
    }
  }  
})

Ten komponent potomny będzie emitował result każdym razem, gdy zostaną wywołane metody sub() lub 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>

Ponieważ v-model jest obecny na komponencie potomnym, rekwizyt o value nazwy został wysłany w tym samym czasie, w counter znajduje się zdarzenie wejściowe, które z kolei poda wartość z komponentu potomnego.

Modified text is an extract of the original Stack Overflow Documentation

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow

Vue.js
Komponenty niestandardowe z modelem v

Szukaj…

Wprowadzenie

Uwagi

Model v na komponencie licznika