Question

我正在使用一个Web应用程序，用户可以在该应用程序上工作。该应用程序的结构如下：

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

现在，用户正在处理的项目由存储在组件A中的对象组成。组件Dn需要在将来写入组件A和C2中的对象。

我无法使输入组件Dn上的v模型起作用。我试图通过props / v-bind将数据从A传递到C1，然后在Dn中，对从C1（起源于A）的props到输入字段进行v建模。我还尝试了在没有成功的情况下使用sync修饰符。

我似乎对vue逻辑缺乏理解。我来自桌面背景，您只需要定义变量的范围即可。我还发现其他vue学徒也有相同的理解问题，但是以某种方式我找不到足够的答案。

我想要一个“全局”变量，该变量可以由每个组件编辑，并链接到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

使用v模型的Vue.js全局数据访问

2 个答案: