如何在另一个 Vue 中访问一个 Vue？

Question

这是我在 2 个不同的 .chtml 文件中的代码，每个文件都包含 .js 文件。

• Layout.cshtml
• 文件1.cshtml
• vue1.js
• vue2.js

我正在使用c# .net mvc

---

Layout.cshtml

 <div id="vuemainlayoutdiv">

    <button v-on:click="onClick1()>
    Click 1
    </button>

   <!--rendering File.html-->
   @RenderBody()

</div>

文件1.cshtml

   <div id="AppcentralVue">

    <button v-on:click="onClick2()>

      Click 1

    </button>

    </div>

vue1.js

new Vue({
el: '#vuemainlayoutdiv',
    data: {
        name: 'first click',
    },
   methods: {
        onClick1: function(){
            alert(this.name);
        }
    }
});

vue2.js

new Vue({
el: '#AppcentralVue',
    data: {
        name: 'second click',
    },
   methods: {
        onClick2: function(){
            alert(this.name);
        }
    }
});

我正在尝试从另一个 Vue 访问 Vue，但无法达到我的目标。因此，我请求您的帮助。

Answer 1

您应该尝试使用状态模式（查看 vuejs doc Vue.js State Management Guide）

基本上，您创建一个数据对象并允许您的实例“共享”它。 因此，您可以从这些实例中访问和改变该对象，它的行为方式是反应式的。

如果您的应用程序长大了，您应该使用 vuex (Vuex) 进行评估，它可以帮助您解决在使用状态管理时可能会发现的一些问题，例如痛苦的调试。

希望对您有所帮助！