Question

我在使用javascript和vue.js时遇到问题，希望有人可以帮助我。在html文件中，我有一个ID为“ canvas”的画布，以及一个下面的ID为“ change”的按钮（如果单击浏览器中的按钮，则应更改键值）。在javascript文件中，我有一个成员变量“ key”，我想在“ change” -vue应用程序中更新该变量，并在“ canvas” -vue应用程序中使用该变量。问题是，canvas-app中的key变量没有采用change-app的值。我该如何解决？

let key = 0;

let changeApp = new Vue({

el:"#change",
    data:{
    },
    methods: {
        change: function () {
            this.key = 1;
    }
});

let canvasApp = new Vue({

el:"#canvas",
    data:{
    },
    methods: {
        useKey: function () {
            // use the updated key variable
            // this.key is always undefined
    }
});

（顺便说一句，如果我在mount-function中定义了key变量（例如2），那么useKey-function中的undefined不是2，而是undefined。）如果有人可以帮助我，我将非常感激。希望我提供了足够的代码并且问题很明确，否则我可以对其进行编辑。谢谢！

Answer 1

您应该看看VueJS Components。您正在尝试在多个Vue实例之间传递数据，从而无法正常工作。

为您的“更改” div创建一个组件，为您的“ canvas”创建另一个。之后，您必须实例化一个 Vue到全局div。然后，您将能够在两个组件之间传递数据。

如何在多个vue.js应用中使用成员变量？

1 个答案: