Eu concordo com as respostas de emissão de eventos e modelo v para as pessoas acima. No entanto, pensei em publicar o que encontrei sobre componentes com vários elementos de formulário que desejam emitir de volta para seus pais, pois esse parece ser um dos primeiros artigos retornados pelo google.
Sei que a pergunta especifica uma única entrada, mas essa parece a correspondência mais próxima e pode economizar tempo para as pessoas com componentes similares do vue. Além disso, ninguém mencionou o .sync
modificador ainda.
Tanto quanto sei, a v-model
solução é adequada apenas para uma entrada retornando ao pai. Demorei um pouco para procurá-lo, mas a documentação do Vue (2.3.0) mostra como sincronizar vários adereços enviados ao componente de volta ao pai (via emissão, é claro).
É chamado apropriadamente de .sync
modificador.
Aqui está o que a documentação diz:
Em alguns casos, podemos precisar de uma ligação bidirecional para um suporte. Infelizmente, a ligação bidirecional verdadeira pode criar problemas de manutenção, porque os componentes filhos podem alterar o pai, sem que a fonte dessa mutação seja óbvia no pai e no filho.
Por isso, recomendamos a emissão de eventos no padrão de
update:myPropName
. Por exemplo, em um componente hipotético com um
title
suporte, poderíamos comunicar a intenção de atribuir um novo valor com:
this.$emit('update:title', newTitle)
Em seguida, o pai pode ouvir esse evento e atualizar uma propriedade de dados local, se desejar. Por exemplo:
<text-document
v-bind:title="doc.title"
v-on:update:title="doc.title = $event"
></text-document>
Por conveniência, oferecemos uma abreviação para esse padrão com o modificador .sync:
<text-document v-bind:title.sync="doc.title"></text-document>
Você também pode sincronizar vários de cada vez enviando um objeto. Confira a documentação aqui