Vue.js devtools 没有在挂载中捕获发射答案

【问题标题】：Vue.js devtools doesn't catch an emit in mountedVue.js devtools 没有在挂载中捕获发射
【发布时间】：2018-12-15 12:04:33
【问题描述】：

似乎当我尝试在mounted中发出事件时，它不会被触发！因此它不会出现在 devtools 中

main.js

const app = new Vue({
    el: '#app',

    mounted() {
        console.log('asd');
        this.$emit("clicked", "someValue");

    }
});

<body>

    <div id="app">

       <h1>vuejs</h1>

    </div>

    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
    <script src="main.js"></script>   

</body>

这是为什么呢？我该怎么做？

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

它工作正常 - 您的 console.log 输出正常，并且您发出事件没有问题。

但是，在您显示的代码中，您还没有设置任何内容来listen 发出的事件...这是一个简单的、人为的示例，说明如何使用@987654323 做到这一点@：

const app = new Vue({
    el: '#app',

    mounted() {
        console.log('asd');

        this.$on('clicked', function(value) {
            alert('clicked!' + value);
        });

        this.$emit("clicked", "someValue");
    }
});

演示：https://codepen.io/anon/pen/qKeWxJ

【讨论】：

谢谢，它成功了。但是为什么该事件现在显示在 devtools 中？

【解决方案2】：

当您在父级挂载的生命周期事件中添加事件处理程序时对于在孩子的挂载事件中发出的事件，处理程序不会捕获孩子发出的事件，因为处理程序是在孩子已经发出事件之后添加。基本上事件的循环是这样的。

父母的创建孩子的创建孩子的挂载父母的挂载显然还有其他生命周期事件发生，但这就是在这种情况下很重要的顺序。

如果你想处理子进程中发出的事件，你需要在孩子的挂载事件之前创建处理程序（调用 $on）。

Is it possible to emit from mounted in Vuejs?

【讨论】：

这是很好的一般信息（有一个赞成票），但 OP 的示例根本没有发生任何父/子通信。