Я согласен с ответами о событиях и v-model для вышеупомянутых. Однако я подумал, что опубликую то, что я нашел, о компонентах с несколькими элементами формы, которые хотят отправить обратно своим родителям, так как эта статья кажется одной из первых статей, возвращаемых Google.
Я знаю, что в вопросе указывается один вход, но это кажется самым близким совпадением и может сэкономить людям некоторое время с подобными компонентами vue. Кроме того, никто не упомянул.sync
модификатор.
Насколько я знаю, v-model
решение подходит только для одного ввода, возвращающего их родителю. Я потратил немного времени на его поиск, но документация Vue (2.3.0) действительно показывает, как синхронизировать несколько реквизитов, отправляемых в компонент, к родителю (конечно, через emit).
Это соответственно называется .sync
модификатором.
Вот что говорится в документации :
В некоторых случаях нам может понадобиться «двусторонняя привязка» для опоры. К сожалению, истинное двустороннее связывание может создать проблемы обслуживания, потому что дочерние компоненты могут видоизменить родительский объект, при этом источник этой мутации не будет очевиден как в родительском, так и в дочернем элементах.
Поэтому вместо этого мы рекомендуем генерировать события по схеме
update:myPropName
. Например, в гипотетическом компоненте с
title
пропеллером мы могли бы сообщить о намерении присвоить новое значение с помощью:
this.$emit('update:title', newTitle)
Затем родитель может прослушать это событие и обновить свойство локальных данных, если он этого хочет. Например:
<text-document
v-bind:title="doc.title"
v-on:update:title="doc.title = $event"
></text-document>
Для удобства мы предлагаем сокращение для этого шаблона с модификатором .sync:
<text-document v-bind:title.sync="doc.title"></text-document>
Вы также можете синхронизировать несколько одновременно, посылая через объект. Проверьте документацию здесь