Vue报v-on with no argument expects an object value错误解决方法

你当前使用的v-on="函数调用"写法不符合Vue语法规范：不带事件参数的v-on是用于批量绑定多个事件监听器的语法，要求传入值为{ 事件名: 处理函数 }格式的对象，你传入的函数调用返回值为undefined，因此触发警告。你现在功能正常是因为Vue解析v-on绑定值时会先执行表达式，刚好触发了播放逻辑，属于语法误用的巧合。

根据你的使用场景二选一即可：

方案1：明确绑定触发事件（推荐） #

如果你需要在子组件挂载完成时执行播放逻辑，直接监听子组件的mounted钩子事件即可：

<div v-if="message.type === 'message'">
  <chat-message @hook:mounted="playMessageNotificationSound" 
                :message="message"/>
</div>
<div v-else-if="message.type === 'notification'">
  <div v-show="$store.state.notifications.enterLeave === 'true'">
    <chat-notification @hook:mounted="playNotificationSound" :message="message" />
  </div>
</div>

额外优化：Vue模板中不需要写this，直接访问实例属性即可，因此可以把v-show里的this.$store简化为$store。

方案2：符合v-on无参数语法规范 #

如果你确实需要使用无参数的v-on语法，直接传入符合格式的事件对象即可：

<div v-if="message.type === 'message'">
  <chat-message v-on="{ mounted: playMessageNotificationSound }" 
                :message="message"/>
</div>
<div v-else-if="message.type === 'notification'">
  <div v-show="$store.state.notifications.enterLeave === 'true'">
    <chat-notification v-on="{ mounted: playNotificationSound }" :message="message" />
  </div>
</div>

如果你的触发逻辑不是子组件挂载，只需要把上面代码里的mounted替换为对应的触发事件名即可，比如子组件抛出自定义的message-show事件就换成message-show。

内容的提问来源于stack exchange，提问作者ArcticMediaRyan