Question

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

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

inputValue的数据应作为值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>

COMPONENT 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/

如果您只想对其进行单向绑定，则不必同步第二个组件。

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

1 个答案: