Vue.js
कस्टम घटक वि-मॉडल के साथ

परिचय

टिप्पणियों

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

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

एक काउंटर घटक पर v- मॉडल

यहां counter demo द्वारा एक्सेस किया गया एक चाइल्ड कंपोनेंट है जो 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()
    }
  }  
})

यह बाल घटक हर बार sub() या add() विधियों को छोड़ने का result होगा।

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

चूंकि v-model चाइल्ड घटक पर मौजूद है, नाम value साथ एक प्रोप उसी समय भेजा गया था, counter पर एक इनपुट ईवेंट है जो बदले में चाइल्ड घटक से मूल्य प्रदान करेगा।