链接两个 Vue.js 组件

2022-01-25 00:00:00 javascript vue.js vue-component

我有一个用于显示数据的单个文件组件和另一个用于编辑相同数据的文件组件.视图具有标签和段落，而编辑组件具有输入和文本区域.

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.

相关文章