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

Question

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

组件 A（应用程序）
组件 B1-Bn（页眉、页脚、主要 window 等，A 的子项）
组件 C1（输入区域；包含供用户处理项目的输入，主要 window 的子项）
组件 C2（输出区域；canvas 显示基于 C1 输入的结果。将来还有一个 "graphical" 与 C1 同步的输入区域。主要 window)
组件 D1-Dn（输入区域的单个部分，如表格、高级输入组件等。C1 的子项）

现在用户正在处理的项目由组件A中存储的一个对象组成，组件Dn需要写入组件A中的对象，以后还需要写入C2中的对象。

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

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

我想要一个 "global" 变量，它可以被每个组件编辑并链接到 DOM 中的元素。实现此目标的最佳方法是什么？

Answer 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);

Answer 2

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

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

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

来源：Vue.js Guide

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

Vue.js global data access with v-model

components

nested

global

vue.js

v-model