Mise à jour en temps réel entre 2 composants?

Question

Est-il possible d'avoir une mise à jour en temps réel des champs d'entrée entre deux composants?

Dans un composant, j'ai un champ de saisie qui a un v-model = "value". Je veux passer cette entrée en temps réel à l'autre composant et la remplir dans ce champ de saisie.

Les données de inputValue doivent être transmises au composant 2 en tant qu'applications de valeur. Ou peut-être que je me trompe avec mon résultat?

COMPOSANTE 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> 

VOLET 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> 

J'ai essayé avec ...

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

... mais je besoin d'un @ keyup.xx. Mais ce n'est pas ce que je veux. Je veux qu'il se mette à jour dès que j'appuie et relâche une lettre, un chiffre, etc.

Answer 1

Vous pouvez certainement réaliser ceci avec des événements, ou vous pouvez déplacer le inputValue jusqu'au composant parent ou racine et le passer à chaque composant comme un accessoire synchronisé.

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

Le deuxième volet ne doit pas être synchronisés si vous voulez juste une manière contraignante à son égard.