Vue.js 如何最好地实例化第二个Vue实例以进行非父子通信

我正在学习Vue 2.0教程，刚刚完成了一节关于使用事件总线进行通信的课程，以允许与直接父级以外的组件进行通信

然而，教程中的代码给了我一个错误，我能够自己解决它，我将在下面解释。我想理解“为什么”最初的代码不起作用，尽管只是为了我自己的学习和理解

本教程中给出的代码如下所示：

Window.Event = new Vue();

Vue.component('coupon', {

    template: '<input placeholder="Coupon Code" @blur="onCouponApplied">',

    methods: {
        onCouponApplied() {
            Event.$emit('applied');
        }
    }
});

var app = new Vue({
    el: '#root',

    created() {
        Event.$on('applied', () => alert('Handling it!'));
    }
});

bus.$emit('applied');

然后参考发射/开启，如下所示：

Window.Event = new Vue();

Vue.component('coupon', {

    template: '<input placeholder="Coupon Code" @blur="onCouponApplied">',

    methods: {
        onCouponApplied() {
            Event.$emit('applied');
        }
    }
});

var app = new Vue({
    el: '#root',

    created() {
        Event.$on('applied', () => alert('Handling it!'));
    }
});

bus.$emit('applied');

及

就我个人的理解而言，我非常感谢以下方面的帮助：

为什么原来的Window.Event格式对我不起作用 当它似乎对其他人有用时

本教程的“注释”部分中有一些注释 使用Window.Event并不是最佳实践， 但他们没有解释原因

我做这件事的方式有什么问题吗 如果不使用原始版本，我会失去任何功能 窗口，活动

---

谢谢

如果教程真的推荐这一行

window.Event = new Vue()

然后他们推荐了一个坏主意<代码>事件是一个事件，即使您可以覆盖它，也绝对不应该覆盖它。您将替换许多其他库（可能包括Vue本身）所依赖的对象

另一方面，如果你真的写了这段代码

Window.Event = new Vue()

然后将Vue对象添加到浏览器中的任何

窗口中。注意大写字母
W
<代码>窗口

与

窗口

不同。小写

窗口

表示所有浏览器中的全局对象。在chrome中，

窗口

指的是其他东西（不确定确切是什么）

---

因此，当您尝试调用

Event.$on（）

时，您引用的是我在上面链接的本机事件对象，而不是您试图创建的总线，这会导致您的错误。

如果教程确实推荐这一行

window.Event = new Vue()

然后他们推荐了一个坏主意<代码>事件是一个事件，即使您可以覆盖它，也绝对不应该覆盖它。您将替换许多其他库（可能包括Vue本身）所依赖的对象

另一方面，如果你真的写了这段代码

Window.Event = new Vue()

然后将Vue对象添加到浏览器中的任何

窗口中。注意大写字母
W
<代码>窗口

与

窗口

不同。小写

窗口

表示所有浏览器中的全局对象。在chrome中，

窗口

指的是其他东西（不确定确切是什么）

---

因此，当您尝试调用

Event.$on（）

时，您引用的是我上面链接的本机事件对象，而不是您试图创建的总线，这导致了您的错误。

哇，是的，大写字母“W”是我的问题！不好意思，但非常感谢。因此，如果我没有看错的话，我使用var总线的方式在任何情况下都是一种更好的方法？@DustinS

var-bus

非常好@DustinS我应该注意到，有时您可能需要编写

window.bus

。例如，如果您使用webpack编译多个单独的文件，您可能需要这样做。谢谢！我会记住的。。。我在本系列的后面部分也看到了网页上的一个部分。哇，是的，大写字母“W”是我的问题！不好意思，但非常感谢。因此，如果我没有看错的话，我使用var总线的方式在任何情况下都是一种更好的方法？@DustinS

var-bus

非常好@DustinS我应该注意到，有时您可能需要编写

window.bus

。例如，如果您使用webpack编译多个单独的文件，您可能需要这样做。谢谢！我会记住的。。。我在后面的系列文章中也看到了关于网页的部分。