可重复使用的下拉切换按钮(Vue和Laravel)

Question

我正在学习vue，我正在尝试构建一个可重用的下拉组件。经过几个小时的工作，我终于把它放在一起了，现在我被困住了，因为我只想把按钮名传递给我的vue组件。

这是我的下拉列表：https://imgur.com/StvEjyF

我想要的是一种将按钮名从刀片传递到按钮的方法。

我的刀片和我想要传递的按钮名的字符串不起作用：

            <Dropdown>

                <template slot="toggler">
                    <button>from blade</button>
                </template>

                <Dropdowncontent>
                    <Dropdownitems>Link1</Dropdownitems>
                    <Dropdownitems>Link2</Dropdownitems>
                </Dropdowncontent>
                
            </Dropdown>

我的下拉组件，它包含按钮：

<template>
    <div class="relative" v-click-outside="onClickOutside">
        <slot name="toggler">
            <button
                @click="showCategories"
                class="flex max-h-52 w-full overflow-auto py-2 pl-3 pr-9 text-sm font-semibold lg:inline-flex lg:w-32"
            >
                from vue
            </button>
        </slot>

        <slot />
    </div>
</template>

我试着接受它作为一个道具，所以我在组件中添加了道具: buttonName来导出默认值，从刀片中向下拉标签中添加了:buttonName=" bla“，但是它没有更新组件中的{buttonName}，所以这不起作用。

我所需要的只是一种将按钮名从刀片传递到vue的方法，因为我不想在刀片中创建按钮，因为它是我为下拉内容和条目设置的按钮。

Answer 1

我通过简单地将标题道具传递给组件来修正它。