链接两个Vue.js组件

Question

我有一个用于显示数据的文件组件和另一个用于编辑相同数据的组件。该视图具有标签和段落，其中编辑组件具有输入和textareas。

这两个组件都采用相同的数据对象。有没有办法通过编辑字段（在编辑组件中与v-model绑定）反映到视图组件的更改？

例如，这是用于显示数据的paragraph.vue

<template>
    <div class="row">
        <div class="col-xs-12">
            <p>{{ text }}</p>
        </div>
    </div>
</template>

这是编辑对话框

<template>
    <div class="form-group">
        <label for="paragaph-text">Paragraph</label>
        <textarea id="paragaph-text" class="form-control" v-model.trim="text"></textarea>
    </div>
</template>

Answer 1

如果您有多个使用相同数据的组件，则可以使用共享状态，如documentation中所述。

但是，如果组件数量增加，并且发生了许多变化，您可能需要像vuex这样的集中状态管理，这在适当的社区中通常是首选。