Question

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

教程中提供的代码给了我一个错误，但是我能够自己解决它，我将在下面解释。我想了解＆＃34;为什么＆＃34;原始代码并不适用于我自己的学习和理解。

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

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

当我试图运行时，我收到一个错误：＆＃34; TypeError：Event。$ on不是函数＆＃34;。在线研究之后，我只是将第一个Vue实例的实例化更改为：

var bus = new Vue();

然后按如下方式引用emit / on：

bus.$emit('applied');

和

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

为了我自己的理解，我非常感谢以下方面的帮助：

为什么原始的Window.Event格式不适用于我当它似乎为其他人工作时？
本教程的评论部分中有一些评论沿着使用Window.Event而不是最佳实践的方式，但他们没有解释原因。
我做完这件事的方式有什么不对，就在那里我没有使用原版丢失的任何功能 Window.Event？

谢谢！

Answer 1

如果教程确实推荐这条确切的行，

window.Event = new Vue()

然后他们建议一个坏主意。 Event是native browser object，如果你能覆盖它，你绝对不应该。您将替换许多其他库（包括可能是Vue本身）所依赖的对象。

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

Window.Event = new Vue()

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

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

如何最好地实例化非父子通信的第二个Vue实例

1 个答案: