是否可以在 vue 中的组件插槽上使用 v-bind？答案

【问题标题】：Is it possible to use v-bind on the slot of an component in vue?是否可以在 vue 中的组件插槽上使用 v-bind？
【发布时间】：2023-01-21 16:51:11
【问题描述】：

我想通过使用 Vuetify.js 创建一个菜单形式的迷你配置文件，它可以被我的 SPA 中的不同对象调用，所以我认为为它创建一个组件是个好主意。

该组件如下所示：

MiniProfileMenu.vue

<template>
    <v-menu
        v-model="menu"
        :close-on-content-click="false"
        location="end"
    >
        <template v-slot:activator="{ activator }">
            <slot v-bind="activator"/>
        </template>
        <v-card>
            <v-row>
                <v-col cols="auto" style="width: 64px">
                    Avatar
                </v-col>
                <v-col>
                    <h4>User</h4>
                    <p class="text-grey-darken-1">User Desc</p>
                </v-col>
            </v-row>
        </v-card>
    </v-menu>
</template>

<script>

export default {
    name: "MiniProfileMenu",

    data() {
        return {
            menu: false,
            activator: null,
        };
    },

    methods: {
        open(user, activator) {
            this.activator = activator;
            this.menu = true;
        },
        close() {
            this.menu = false;
        },
    },
}
</script>
<style scoped>
.profile-card {
    width: 100%;
}
</style>

这就是我想使用它的情况：

DashboardCommunityPage.vue

<template>
    <v-container>
        <v-row>
            <v-spacer />
            <v-col cols="auto">
                <mini-profile-menu ref="miniProfile">
                    <div
                        @click="openMiniProfile(user_uuid)"
                    >
                        Click me!
                    </div>
                </mini-profile-menu>
            </v-col>
            <v-spacer />
        </v-row>
    </v-container>
</template>

<script>
import MiniProfileMenu from "#/components/MiniProfileMenu.vue";

export default {
    name: "DashboardCommunityPage",

    components: {MiniProfileMenu},

    methods: {
        openMiniProfile(uuid) {
            this.$refs.miniProfile(uuid);
        }
    }
};
</script>

我现在的问题是，我得到了错误 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'key') 来自我的 MiniProfileMenu 组件中 <slot /> 上的 v-bind。我想将它绑定到 MiniProfileMenu 插槽中的 div，以便在单击时菜单出现在它旁边。是否有可能以另一种方式做到这一点？

提前致谢

【问题讨论】：

您使用的是哪个版本的 vuetify？
@PierreSaid Vuetify 3.1.0

标签： javascript vue.js vuetify.js

【解决方案1】：

您没有正确绑定插槽的道具：

    <v-menu>
        <template v-slot:activator="{ activator }">
            ...
        </template>

根据docs，activator插槽有这些道具：

{ isActive: boolean; props: Record<string, any> }

因此，您的解构变量 activator 将始终未定义。

你可能想这样做：

    <v-menu>
        <template v-slot:activator="{ props, isActive }">
            <slot :props="props" :isActive="isActive" />
        </template>

或者

    <v-menu>
        <template v-slot:activator="slotProps">
            <slot v-bind="slotProps" />
        </template>

【讨论】：