Vue.js => Componentes personalizados con v-modelo

Introducción

Muchas veces tenemos que crear algunos componentes que realizan algunas acciones / operaciones en los datos y requerimos eso en el componente principal. La mayoría de las veces, vuex sería una mejor solución, pero en los casos en que el comportamiento del componente secundario no tiene nada que ver con el estado de la aplicación, por ejemplo: un control deslizante de rango, selector de fecha / hora, lector de archivos

Tener tiendas individuales para cada componente cada vez que se usan se complica.

Observaciones

Para tener v-model en un componente, debe cumplir dos condiciones.

Debe tener un prop llamado 'valor'
Debe emitir un evento de input con el valor esperado por los componentes principales.

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

es solo azúcar sintáctica para

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

v-modelo en un componente contador

Aquí el counter es un componente secundario al que se accede mediante una demo que es un componente principal que usa 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()
    }
  }  
})

Este componente hijo emitirá result cada vez que se llamen los métodos sub() o 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>

Dado que v-model está presente en el componente secundario, al mismo tiempo se envió un prop con value nombre, hay un evento de entrada en el counter que, a su vez, proporcionará el valor del componente secundario.

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

Vue.js
Componentes personalizados con v-modelo

Buscar..

Introducción

Observaciones

v-modelo en un componente contador