vuejs2 - 为什么 $emit 在我的 vue 组件中不起作用

Question

几个小时以来，我一直在努力解决这个问题。我看不到问题，据我所知，我正在关注这里的文档:https://vuejs.org/v2/guide/components-custom-events.html

下面的代码

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="wrap">
  <test-listen>
    <test-emit></test-emit>
  </test-listen>
</div>
<script>
Vue.component('test-listen', {
  data: function(){
    return {};
  },
  methods: {
    customHandler : function(e){
      console.log(e);
      console.log("works");
    }
  },
  template: `
    <div class='test_listen' v-on:custom="customHandler">
      <slot></slot>
    </div>
  `
});

Vue.component('test-emit',{
  data: function(){
    return {};
  },
  methods: {
    clickHandler : function(){
      this.$emit('custom');
    }
  },
  template : `
    <div class='test_emit' v-on:click="clickHandler">
      test
    </div>
  `
});

new Vue({
  el:"#wrap"
});
</script>
<style>
.test_listen{
  display:block;
  padding:20px;
  border:1px solid #000;
}
.test_emit{
  display:block;
  width:100px;
  height:100px;
  background-color:#f0f;
  color:#fff;
  font-weight:700;
  font-size:20px;
}
</style>

但是监听器肯定会绑定(bind)到元素，因为如果我调度 vanillaJS CustomEvent 它会很好地触发控制台日志。我错过了什么？

Answer 1

我在这里只看到一个错误。您应该添加 v-on到子组件。
当你$emit('custom')从内部它将调用父组件上的“customHandler”。
Working jsfiddle

    <test-listen>
        <test-emit v-on:custom="customHandler"></test-emit>
    </test-listen>