Vue.js 父组件未捕获子组件中激发的事件

下面是我期待的工作演示：

子组件正在触发一个父组件没有接收到的事件。根据一个孩子和父母之间的事件关系，我认为这是可行的我忽略了什么导致我的控制台中缺少日志？

Vue.component('child-component', {
    template: '<div>Child</div>',
  mounted() {
    this.$emit('test');
  },
  methods: {
    onClick: function() {
        this.$emit('child-click-on');
    }
  }
 });

var vm = new Vue({
    el: '#app',
    created: function () {
        this.$on('test', function () {
            console.log('test-on');
        });
        this.$on('child-click', function () {
            console.log('child-click-on');
        });
    }
});

Vue.component（'child-component'{
模板：'子'，
安装的（）{
这是$emit（'test'）；
},
方法：{
onClick:function（）{
这是。$emit（'child-click-on'）；
}
}
});
var vm=新的Vue({
el:“#应用程序”，
已创建：函数（）{
此。$on（'test'，函数（）{
console.log（'test-on'）；
});
此.$on（'子单击'，函数（）{
log（'child-click-on'）；
});
}
});

首先，此代码

<child-component @click="onClick()"></child-component>

此时，组件将正确地发出

子单击事件

mounted: function () {
  this.$refs.child.$on('child-click-on', function () {
    console.log('child-click-on');
  });
}

其次，将侦听器设置为：

this.$on('child-click', function () {
  console.log('child-click-on');
});

让我们快速超越它正在侦听错误事件的事实（它应该侦听
child单击
，因为这就是所发出的事件），而是通过说
this.$on
您正在侦听父Vue或根Vue发出事件，而这永远不会发生，因为事件是由组件发出的。因此，您需要监听组件上的事件。按照惯例，这是通过在模板中添加处理程序来完成的：

<child-component @child-click-on="onChildClick"></child-component>

由于ref在呈现组件之前不可用，因此必须在
mounted
事件中添加侦听器

mounted: function () {
  this.$refs.child.$on('child-click-on', function () {
    console.log('child-click-on');
  });
}

下面是一个惯用方法解决问题的例子


console.clear（）
Vue.component（‘子组件’{
模板：`
小孩
`,
方法：{
onClick:function（）{
这是。$emit（'child-click-on'）；
}
}
});
var vm=新的Vue({
el:“#应用程序”，
方法：{
onChildClick（）{
log（“子点击”）
}
}
});

首先，此代码

<child-component @click="onClick()"></child-component>

此时，组件将正确地发出
子单击事件

mounted: function () {
  this.$refs.child.$on('child-click-on', function () {
    console.log('child-click-on');
  });
}

其次，将侦听器设置为：

this.$on('child-click', function () {
  console.log('child-click-on');
});

让我们快速超越它正在侦听错误事件的事实（它应该侦听
child单击
，因为这就是所发出的事件），而是通过说
this.$on
您正在侦听父Vue或根Vue发出事件，而这永远不会发生，因为事件是由组件发出的。因此，您需要监听组件上的事件。按照惯例，这是通过在模板中添加处理程序来完成的：

<child-component @child-click-on="onChildClick"></child-component>

由于ref在呈现组件之前不可用，因此必须在
mounted
事件中添加侦听器

mounted: function () {
  this.$refs.child.$on('child-click-on', function () {
    console.log('child-click-on');
  });
}

下面是一个惯用方法解决问题的例子


console.clear（）
Vue.component（‘子组件’{
模板：`
小孩
`,
方法：{
onClick:function（）{
这是。$emit（'child-click-on'）；
}
}
});
var vm=新的Vue({
el:“#应用程序”，
方法：{
onChildClick（）{
log（“子点击”）
}
}
});

@Bert给出了一个很好的答案，但最终它仍然需要很多复杂性。我最终找到的解决方案是激发根事件命名空间中的所有事件。您可以使用
this.$root.$off（）
和
this.$root.$on（）
来执行此操作
 @Bert给出了一个很好的答案，但最终还是需要很多复杂性。我最终找到的解决方案是激发根事件命名空间中的所有事件。您可以使用
this.$root.$off（）
和
this.$root.$on（）
来执行此操作
 好吧，有几件事，但这里有一个有效的版本@伯特，太好了，你能帮我理解为什么这个有效而另一个无效吗？理想情况下，我还需要能够监听在父组件上触发的事件。我想知道您推荐的方法是否将此限制为只能监听子组件上的事件。我正在写一个答案。您的
#app
标记的内容看起来如何？您是否将子组件直接包含在该标记中？好吧，有几件事，但这里有一个工作版本@伯特，太好了，你能帮我理解为什么这个有效而另一个无效吗？理想情况下，我还需要能够监听在父组件上触发的事件。我想知道您推荐的方法是否将此限制为只能监听子组件上的事件。我正在写一个答案。您的
#app
标记的内容看起来如何？是否将子组件直接包含在该标记中？