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

Question

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

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

Данные 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 до родительского компонента или root и передать его каждому компоненту в качестве синхронизированный опор.

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

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