Обновление в реальном времени между 2 компонентами?

Question

Возможно ли обновление в реальном времени полей ввода между двумя компонентами?

В компоненте у меня есть поле ввода, которое имеет v-модель ="значение". Я хочу передать этот ввод в реальном времени другому компоненту и заполнить его в этом поле ввода.

Данные inputValue должны быть переданы компоненту 2 в качестве значения реквизита. А может я ошибаюсь с моим результатом?

КОМПОНЕНТ 1

<template>
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input class="mdl-textfield__input" type="text" id="global-{{element}}" v-model="inputValue">
        <label class="mdl-textfield__label" for="global-{{element}}">{{ label }}</label>
    </div>
</template>

КОМПОНЕНТ 2

<template>
     <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
        <input name="items[{{prop1}}][{{element}}]" value="{{value}}" class="mdl-textfield__input"
               type="text" id="{{element}}">
        <label class="mdl-textfield__label" for="{{element}}">{{ label }}</label>
    </div>
</template>

<script>
    export default{
        props: ['prop1', 'element', 'value', 'label']
     }
 </script>

Я пытался с...

this.$dispatch('tag-update', this.inputValue);

... но мне нужен @keyup.xx. Но это не то, что я хочу. Я хочу, чтобы он обновился, как только я нажал и выпустил букву, номер и т. Д.

Answer 1

Вы можете, конечно, достичь этого с помощью событий, или вы можете переместить inputValue до родительского компонента или корня и передать его каждому компоненту в качестве синхронизируемого объекта.

http://jsfiddle.net/gtmmeak9/118/

Второй компонент не нужно синхронизировать, если вы просто хотите одностороннюю привязку к нему.