vue.js之为什么不能使用 v-on 简写来绑定(bind) "on"

文档 say

<a @click="doSomething"> ... </a> 

是

<a v-on:click="doSomething"> ... </a> 

为什么这个简写不是在所有情况下都有效？例如，

<v-dialog v-model="dialog" width="500"> 
  <template v-slot:activator="{ on }"> 
    <v-btn dark v-on="on">Working button</v-btn> 
    <v-spacer />           
    <v-btn dark @on="on">Non-working button</v-btn> 
  </template> 
  <v-card> 
    <v-card-title>Some Dialog</v-card-title> 
      <v-card-text> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
     </v-card-text> 
  </v-card> 
</v-dialog> 

“工作按钮”有效，但“非工作按钮”无效。 v-on 简写似乎只适用于事件。但如果这是真的，我还没有看到它的记录。

我在这个例子中使用的是 Vuetify，但我的问题是关于 Vue.js 的。

这是上面的代码笔:https://codepen.io/keeganwitt/pen/bGGVeZY

请您参考如下方法:

v-on:click 简写是 @click 而不是 @on

因此您可以使用 @click 而不是 v-on="on"。但是这里的 slotProp on 是一个具有 click(函数)属性的对象。所以你可以像下面这样使用它

<v-btn dark @click="on.click">Now working button</v-btn> 

但建议使用v-on="on"，因为on对象下可能有多个属性

例如:如果 on 是 { click: fn(), mouseup: fn() }

<v-btn dark @click="on.click" @mouseup="on.mouseup" >Now working button</v-btn> 
<!-- same as --> 
<v-btn dark v-on="on">Now working button</v-btn>