两个组件之间的实时更新？

Question

是否可以实时更新两个组件之间的输入字段？

在一个组件中，我有一个输入字段，它有一个 v-model="value"。我想将该输入实时传递给其他组件并将其填充到该输入字段中。

inputValue 的数据应该作为 value props 传递给组件 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/

如果您只想以一种方式绑定第二个组件，则不必同步它。

两个组件之间的实时更新？

Real time update between 2 components?

real-time

real-time-updates

vue.js