Question

我正在学习Vuejs event handling。
我认为开发人员可以使用js文件中的this.$on('event', handler)来处理'event'。

有一个example。

<div id="mainapp" v-on:event="processEventFromView">
    <button type="button" v-on:click="emitEvent">
       Emit Event
    </button>
</div>

js文件

var app = new Vue({
  el:"#mainapp",
  data:{
    show:false
  },
  created:function(){
     this.$on('event', this.processEvent);
  },
  methods:{
      emitEvent:function(){
          this.$emit('event', {data:'mydata'});
      },
      processEvent(data){
         console.log('js', data);  //this is fired when clicking the button.
      },
      processEventFromView(data){
         console.log('view', data);  //this is not fired whenever.
      }      

   }
})

但是在该示例中，单击按钮时仅触发由processEvent附加的处理程序this.$on()。 v-on与this.$on有什么区别？
为什么无论何时都不会调用v-on:event="processEventFromView"？
我可以将event handler附加到引用为ref而不是click的按钮的v-on:click="emitEvent"事件上吗？
请帮助我我的错。

Answer 1

我想这与Vue的Linus Berg的回答有关，https://stackoverflow.com/a/36159698/1225266 尽管它与早期版本的Vue有关（该帖子来自2016年），但我认为它仍然适用。

简而言之，您问题的答案

为什么什么时候都不调用v-on：event =“ processEventFromView”？

是（我引用）

不能在模板中使用v-on：custom-event-name（仅在组件上使用）。

VueJs v-on：event和this。$ on（event，handler）有什么区别？

1 个答案: