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

Question

我有以下使用此 VueTailwind 包的代码：

<t-dropdown>
<div
    slot="trigger"
    slot-scope="{mousedownHandler, focusHandler, blurHandler, keydownHandler}"
>
    <button
        id="reseller-menu"
        aria-label="User menu"
        aria-haspopup="true"
        @mousedown="mousedownHandler"
        @focus="focusHandler"
        @blur="blurHandler"
        @keydown="keydownHandler"
    >
        {{ $page.props.auth.user.reseller.name }}
        <icon icon="chevron-down" class-name="ml-2" />
    </button>
</div>

<div slot-scope="{ blurHandler }">
    <span v-for="user in users" :key="reseller.id" role="menuitem" class="block px-6 cursor-pointer py-2 hover:bg-indigo-500 hover:text-white"
         @click="changeUser(user.id); blurHandler">{{ user.name }}</span>
</div>
</t-dropdown>

但是，每当将changeUser(user.id)方法（父组件中的一个方法似乎执行良好）添加到@click事件时，blurHandler不会执行。我能够解决这个问题的唯一方法是使用两个不同的事件，如下所示：

<span v-for="user in users" :key="reseller.id" role="menuitem" class="block px-6 cursor-pointer py-2 hover:bg-indigo-500 hover:text-white"
         @click="changeUser(user.id)" @mouseup="blurHandler">{{ user.name }}</span>

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

Answer 1

当v-on值为函数引用时，模板编译器将其转换为函数调用，传递事件参数：

<button @click="functionRef">

<!-- ...is transformed into: -->

<button @click="functionRef($event)">

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

<button @click="onClick(); functionRef">

<!-- ...is transformed into: -->

<button @click="() => { onClick(); functionRef; }">

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

<button @click="onClick(); functionRef()">

所以你的标记应该是：

<div slot-scope="{ blurHandler }">
    <span v-for="user in users" ⋯                 
          @click="changeUser(user.id); blurHandler()">
        {{ user.name }}
    </span>
</div>

另请注意，自 2.6.0 起，slot-scope 已 deprecated for v-slot。

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

Cannot execute scoped slot and function in the same event Vue

vue.js

vuejs2

tailwind-css