Custom Components with v-model

Other topics

Remarks:

To have v-model on a component you need to fulfil two conditions.

  1. It should have a prop named 'value'
  2. It should emit an input event with the value expected by the parent components.

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

is just syntactic sugar for

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

v-model on a counter component

Here counter is a child component accessed by demo which is a parent component using 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()
    }
  }  
})

This child component will be emitting result each time sub() or add() methods are called.


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

Since v-model is present on the child component, a prop with name value was sent at the same time, there is an input event on the counter which will in turn provide the value from the child component.

Contributors

Topic Id: 9353

Example Ids: 28972

This site is not affiliated with any of the contributors.