来自主 vue 实例的事件自定义事件，从组件监听答案

【问题标题】：Event custom event from main vue instance, listen from component来自主 vue 实例的事件自定义事件，从组件监听
【发布时间】：2017-02-25 23:09:26
【问题描述】：

这里是 vue js 的新手，

只是想知道是否可以从主 vue 实例（父级）发出自定义事件，并且组件可以侦听该自定义事件并在触发该事件时采取相应的行动？

我想在 vue 实例 mounted 生命周期函数上触发一个自定义事件，然后所有组件都可以自己初始化。

例如

主 vue 实例

new Vue( {
    el : '#main-app',
    mounted : function() {
       this.$emit( 'init-app' );
    }
} );

然后在各个组件上，它可以监听 'init-app' 自定义事件，然后在它被触发或发出时采取相应的行动。

不确定如何做到这一点，因为 vue js 事件侦听器附加到 html 标签？组件中的事件监听器或函数是否可以仅通过仅从父级发出事件来触发？

注意：我使用的是 vue js 2.0.3 而且我的组件是全局的，它们不是内联的

例如

Vue.component('my-component', {
   template: '#component-template'
});

我可以稍后添加更多组件。

提前致谢。

【问题讨论】：

标签： vue.js

【解决方案1】：

初始化子组件的正确方法是为每个子组件使用created:生命周期钩子。

原因：当您从父组件发送init-app 事件时，您的子组件很可能没有被实例化。所以，它永远不会被初始化。

关于事件的附加说明：如果您将事件从子组件发送到父组件，则应使用this.$parent.$emit("my-event-code") 并在父端以this.$on("my-event-code") 接收它。经过数小时尝试各种方法后，我最近弄明白了。

因此，如果您尝试从父级向子级发送 init-app 事件，您可能必须以 this.$parent.$on("init-app", ...) 的形式监听子级组件 - 我还没有验证这一点，这是我目前的理解。

【讨论】：

感谢@Mani 的回答，能否提供您的解决方案的代码示例？顺便说一句，我已经更新了问题，我没有告知我的组件是全局组件，而不是内联到主 vue 实例。
@Jplus2 我没有意识到您有彼此无关的全局组件。在这种情况下，您只有一个选择 - 创建一个 事件总线，如下所述：vuejs.org/guide/components.html#Non-Parent-Child-Communication
谢谢@Mani，你带我找到解决方案，基本上vue组件确实有类似于vue实例的生命周期事件，我没有测试它是愚蠢的。文档虽然没有明确提到具有生命周期钩子的组件，但无论如何，我使用了 mounted 钩子，因为它是在组件渲染后触发的。
另外需要注意的是，对于全局组件，您必须先注册组件，然后再实例化您的主 vue 实例，我觉得这很奇怪，但您这样做是为了让它工作。
基本上@Mani 我只是在学习 vue js，我选择 vue 而不是 angular，因为与 angular 不同，vue 很容易融入现有的应用程序，Angular 是固执己见的，你必须按照 Angular 的方式来做，我没有这个特权，因为我正在开发现有的应用程序。