用于下拉切换的可重用按钮（Vue 和 Laravel）

Question

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

我想要的是一种将按钮名称从我的 blade 传递给按钮的方法。

我的 blade 只有我尝试传递的按钮名称字符串不起作用：

            <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] 以在我的组件中导出默认值，并且从 blade 我添加了 :buttonName="bla bla" 到下拉标签但是它没有更新组件中的 {{buttonName}}，所以这没有用。

我只需要一种将按钮名称从 blade 传递给 vue 的方法，因为我不想在 blade 中创建按钮，因为它是我对下拉内容的切换和项目

Answer 1

我通过简单地将 title 属性传递给组件来修复它

用于下拉切换的可重用按钮（Vue 和 Laravel）

Reusable button for dropdown toggle (Vue and Laravel)

laravel

vue.js

laravel-blade

vue-component