无法在同一事件Vue中执行作用域插槽和函数

分享于2022年07月17日 tailwind-css vue.js vuejs2 问答
【问题标题】:无法在同一事件Vue中执行作用域插槽和函数(Cannot execute scoped slot and function in the same event Vue)
【发布时间】:2022-01-29 09:53:40
【问题描述】:

我有以下代码使用这个 VueTailwind 包:


{{ user.name }}

但是,只要将 changeUser(user.id) 方法(父组件中的一个似乎执行良好的方法)添加到 @click 事件中,就不会执行 blurHandler 。我能够解决此问题的唯一方法是使用两个不同的事件,例如:

{{ user.name }}

由于 this 在这种情况下似乎不起作用,我如何在同一事件中同时使用两者?


【解决方案1】:

v-on 值是 函数引用 时,模板编译器将其转换为函数调用,并传递事件参数:

但是当 v-on 值是一个 表达式 时,模板编译器会将它包装在一个函数中:

注意 functionRef; 不是函数调用,实际上什么也不做。要实际调用该表达式中的函数,请添加括号以使其成为调用:

所以你的标记应该是:

{{ user.name }}

另请注意,从 2.6.0 开始, slot-scope 一直是 deprecated for v-slot

  • 确实,如果 blurHandler 需要访问事件arg(例如,获取事件源), $event 也必须被传递。