链接两个Vue.js组件 [英] Linking two Vue.js components

问题描述

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

I have one single file component that is used to show data and another one that is used to edit the same data. The view has labels and paragraphs where as the edit component has inputs and textareas.

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

Both of these components take the same data object. Is there a way that by editing the fields (bound with v-model in the edit component) the changes a reflected to the view component?

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

For example, here's my paragraph.vue that is used to show the data

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

推荐答案

如果您有多个组件使用相同的数据，可以使用文档中说明的共享状态。

If you have multiple components using the same data, you can use a share state as explained in the documentation.

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

But if the number of components increases, and there are many changes happening, you may need a Centralized State Management like vuex, which is generally preferred in due community.

这篇关于链接两个Vue.js组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！