0

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

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

4

2 回答 2

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);
于 2019-02-08T09:14:48.057 回答
0

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

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

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

来源：Vue.js 指南

于 2019-02-11T08:37:17.393 回答