vue.js - 如何最好地为非父子通信实例化第二个 Vue 实例

Question

我正在通过一个教程来学习 Vue 2.0，并且刚刚完成了一个关于使用事件总线进行通信以允许与直接父组件以外的组件进行通信的类(class)。

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

教程中给出的代码如下:

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!'));
    }
});

当我尝试运行时，收到错误消息:“TypeError: Event.$on is not a function”。网上研究了一下，干脆把第一个Vue实例的实例化改成了:

var bus = new Vue();

然后引用emit/on如下:

bus.$emit('applied');

和

bus.$on('applied', () => alert('Handling it!'));

就我自己的理解而言，我希望能在以下方面提供一些帮助:

1. 为什么原始的 Window.Event 格式对我不起作用 什么时候对其他人有用？
2. 本教程的评论部分有一些评论 沿着使用 Window.Event 的路线作为不是最佳实践， 但他们没有解释原因。
3. 我这样做的方式有什么问题吗？ 不使用原版我会失去的任何功能 窗口事件？

谢谢!

Answer 1

如果教程确实推荐了这一行，

window.Event = new Vue()

然后他们推荐一个坏主意。 事件 是一个 native browser object ，即使你可以覆盖它，你也绝对不应该。您将替换许多其他库(可能包括 Vue 本身)所依赖的对象。

另一方面，如果您确实编写了这段代码

Window.Event = new Vue()

然后您将 Vue 对象添加到浏览器中的任何 Window 中。注意大写的 W。 Window 与 window 不同。小写的 window 是指所有浏览器中的全局对象。在 chrome 中，Window 指的是其他东西(不确定具体是什么)。

因此，当您尝试调用 Event.$on() 时，您引用的是我在上面链接的 native Event 对象，而不是您尝试创建的总线，这会导致您的错误。