Vue.js 使用 v-model 进行全局数据访问答案

【问题标题】：Vue.js global data access with v-modelVue.js 使用 v-model 进行全局数据访问
【发布时间】：2019-02-08 08:03:53
【问题描述】：

我正在开发一个网络应用程序，用户可以在其中处理项目。该应用程序的结构如下：

组件 A（应用）
组件 B1-Bn（页眉、页脚、主窗口等，A 的子级）
组件 C1（输入区域；用于用户处理项目的输入，主窗口的子窗口）
组件 C2（输出区域；画布显示基于来自 C1 的输入的结果。将来还有一个与 C1 同步的“图形”输入区域。主窗口的子窗口）
组件 D1-Dn（输入区域的单个部分，如表格、高级输入组件等。C1 的子级）

现在用户正在处理的项目包含一个存储在组件 A 中的对象。组件 Dn 需要写入组件 A 中的对象，并且将来还需要写入 C2。

我无法让输入组件 Dn 上的 v-model 工作。我尝试通过 props / v-bind 将数据从 A 向下传递到 C1，然后在 Dn 中，我对来自 C1（源自 A）的 prop 进行 v-model 到输入字段。我也尝试使用同步修饰符但没有成功。

我好像对vue逻辑缺乏了解。我来自桌面背景，您只需定义变量的范围。我还发现其他vue学徒也有同样的理解问题，但不知怎么的，我找到的答案还不够。

我想要一个可以被每个组件编辑并链接到 DOM 中的元素的“全局”变量。实现这一目标的最佳方法是什么？

【问题讨论】：

您应该使用 vuex 存储在所有组件之间共享变量。参考链接vuex.vuejs.org。

标签： vue.js nested components global v-model

【解决方案1】：

在你的根组件（组件 A）中创建 Vue 对象时在数据中声明你的变量，比如

var app = new Vue({
   data: function(){
        return {
            showSetting: {}
        }
    },
})

现在您可以在任何组件中访问这个showSetting 变量，例如

app.showSetting;
//change it in any component
app.showSetting = {a:1,b:2};
//or append new value to object
Object.assign({d:3},app.showSetting);

【讨论】：

【解决方案2】：

感谢到目前为止的回答。我想他们两个都工作。我找到了另一个解决方案，因为现在我完全理解了数据是如何在 vue 中传递的：

请注意，JavaScript 中的对象和数组是通过引用传递的，所以如果 prop 是数组或对象，则改变对象或子组件内的数组本身会影响父状态。

以后我会将所有数据作为数组传递，因为我只需要引用。剩下的唯一问题是为什么不允许程序员自己定义数据是否通过引用传递...

来源：Vue.js Guide

【讨论】：