链接两个 Vue.js 组件答案

【问题标题】：Linking two Vue.js components链接两个 Vue.js 组件
【发布时间】：2017-04-16 01:27:05
【问题描述】：

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

这两个组件都采用相同的数据对象。有没有办法通过编辑字段（与编辑组件中的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>

【问题讨论】：

如果它们具有相同的父组件，那么您可以使用事件来表示新的段落值。
如果您想使用事件，请阅读官方文档中的组件道具vuejs.org/v2/guide/components.html#Props 和自定义事件vuejs.org/v2/guide/components.html#Custom-Events。我想那里提出的解决方案是您正在寻找的解决方案。当然，集中状态管理（使用 vuex）也是非常好的解决方案。

标签： javascript vue.js vue-component

【解决方案1】：

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

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

【讨论】：