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

Question

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

• 组件 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 中的元素的“全局”变量。实现这一目标的最佳方法是什么？

标签： vue.jsnestedcomponentsglobalv-model

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