Question

我期待工作的演示在这里：https://jsfiddle.net/qe766xn0/4/

子组件正在触发父组件未接收的事件。根据{{3}}关于孩子和父母之间的事件关系，我希望这可行。 我忽略了什么导致我的控制台缺少日志？

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

Answer 1

首先，这段代码

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

表示 root Vue正在侦听子组件发出click事件，并且这似乎不是您的意图。看起来你真的想要将一个点击处理程序附加到组件的根div，这必须在组件中完成。

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

此时，您的组件将正确发出child-click-on事件。

其次，你设置了这样的监听器：

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

让我们通过说{{{{{{ 1}}您正在侦听父或根Vue以发出事件，并且从未发生过，因为事件是由组件发出的。因此，您需要在组件上侦听事件。惯用，这是通过在模板中添加处理程序来完成的：

child-click-on

根Vue正在侦听this.$on事件，此时它将调用<child-component @child-click-on="onChildClick"></child-component>方法（这只是我为处理事件定义的方法）。

但是，如果由于某种原因您被迫使用child-click-on设置处理程序，则需要使用ref来获取对子组件的引用，以便您可以设置事件侦听器。

onChildClick

由于refs在呈现组件之前不可用，因此您必须在$on事件中添加侦听器。

<child-component ref="child"></child-component>

所以，这是一个以惯用方法解决问题的例子。

＆＃13;

mounted

＆＃13;

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

＆＃13;

这里使用参考文献解决。

＆＃13;

console.clear()

Vue.component('child-component', {
    template: `<div @click="onClick()">
    	Child
    </div>`,
  methods: {
    onClick: function() {
    	this.$emit('child-click-on');
    }
  }
 });

var vm = new Vue({
    el: '#app',
  methods: {
    onChildClick() {
      console.log("child-click-on")
    }
  }
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <child-component @child-click-on="onChildClick"></child-component>
</div>

＆＃13;

Answer 2

@Bert发布了一个很好的答案，但是在一天结束时它仍然需要很多复杂性。我最终找到的解决方案是触发根事件命名空间中的所有事件。您可以使用this.$root.$off()和this.$root.$on()来完成此操作。

父级不捕获在子组件中触发的事件

2 个答案: