Como adicionar vinculação de dados bidirecional a componentes personalizados no Vue.js

Introdução

Neste artigo, você aprenderá como adicionar a diretiva v-model para componentes personalizados no Vue.js. Embora a diretiva v-model seja um recurso poderoso para adicionar vinculação de dados bidirecional em componentes Vue.js básicos, o suporte para componentes personalizados não é exercitado.

Pré-requisitos

Uma compreensão da vinculação de dados bidirecional no Vue.js é sugerida, mas não obrigatória. Para saber mais sobre ligação de dados bidirecional, confira nosso tutorial Como usar o v-model para ligação bidirecional no Vue.js.

Implementando a Diretiva v-model

Para entender como implementar o suporte v-model em seus componentes, você precisa entender como ele funciona internamente. O valor v-model=prop é um atalho para :value=prop @input=prop=arguments\[0\].

Assim, para tornar seu componente compatível com a diretiva v-model, ele deve aceitar os atributos :value e @input para adicionar e emitir um valor quando um usuário interage com seu aplicativo Vue.js.

Em seu arquivo DatePicker.vue, crie um componente personalizado que aceite um valor mês e ano em um objeto. Os atributos :value e @input representarão os valores referenciados em seu componente. Defina um modelo com entradas para seus valores mês e ano:

<template>
  <div class="date-picker">
    Month: <input type="number" ref="month-picker" :value="value.month" @input="updateDate()"/>
    Year: <input type="number" ref="year-picker" :value="value.year" @input="updateDate()"/>
  </div>
</template>

<script>
export default {
  props: ['value'],

  methods: {
    updateDate() {
      this.$emit('input', {
        month: +this.$refs.monthPicker.value,
        year: +this.$refs.yearPicker.value
      })
    }
  }
};
</script>

Dentro da tag script, seu método personalizado updateDate() aplica a propriedade de instância pública .$emit() para atualizar os valores em mês e ano com base na entrada do usuário.

Para usar seu componente personalizado em outros arquivos Vue.js, defina a diretiva v-model para vincular e adicionar valores de suas propriedades month e year em seu arquivo WrapperComponent.vue:

<template>
  <div class="wrapper">
    <date-picker v-model="date-picker"></date-picker>
    <p>
      Month: {{date.month}}
      Year: {{date.year}}
    </p>
  </div>
</template>

Na tag script, importe seu componente personalizado e insira-o na propriedade components. Isso empregará a funcionalidade contida em seu componente DatePicker em seu arquivo WrapperComponent.vue:

<script>
import DatePicker from './DatePicker.vue';

export default {
  components: {
    DatePicker
  },

  data() {
    return {
      date: {
        month: 1,
        year: 2017
      }
    }
  }
})
</script>

O modelo data() armazena e retorna os valores em suas propriedades month e year.

Para revisar, a ligação bidirecional com componentes personalizados requer os atributos :value e @input para adicionar e emitir uma data atualizada em uma chamada.

Praticando v-model em componentes avançados

Usando uma ou mais propriedades calculadas, você pode integrar dados, como strings, em uma entrada de formato que os elementos podem gerenciar. Isso geralmente é usado com componentes personalizados avançados que lidam com uma variedade de formatos de entrada em potencial.

Em seu arquivo StringDatePicker.vue, crie um componente personalizado que passe uma string com a estrutura m/yyyy. Defina seus atributos :value e @input em suas entradas para aceitar e atualizar valores de seu componente personalizado:

<template>
  <div class="date-picker">
    Month: <input type="number" ref="monthPicker" :value="splitDate.month" @input="updateDate()"/>
    Year: <input type="number" ref="yearPicker" :value="splitDate.year" @input="updateDate()"/>
  </div>
</template>

Usando uma propriedade computada, neste caso splitDate, você pode dividir e retornar a string de entrada em um objeto com as propriedades month e year:

[label StringDatePicker.vue] 
<script>
export default {
  props: ['value'],

  computed: {
    splitDate() {
      const splitValueString = this.value.split('/');

       return {
        month: splitValueString[0],
        year: splitValueString[1]
      }
    }
  },

  methods: {
    updateDate() {
      const monthValue = this.$refs.monthPicker.value;
      const yearValue = this.$refs.yearPicker.value;
      this.$emit('input', `${monthValue}/${yearValue}`);
    }
  }
};
</script>

O objeto methods aplica a propriedade updateDate() para emitir month e year atualizados de uma string de entrada. Agora você pode importar o componente personalizado avançado StringDatePicker para outro arquivo e operar a diretiva v-model para vincular e adicionar seus valores de seu mês e propriedades year de uma só vez.

Conclusão

A diretiva v-model fornece funcionalidade extra quando implementada em componentes personalizados do Vue.js. Você também pode integrar a ligação de dados bidirecional em componentes personalizados avançados para manipular tipos de dados em formatos precisos.