Vue.js 如何避免在类似的Vue组件中重复道具？

组件结构：

我的应用程序中有许多

按钮

组件，每个组件中都有一个不同的

图标

（我将这些

图标

放在它们自己的组件中，以便在其他地方使用）。我希望这些

图标

组件在父组件悬停时响应悬停事件

我有一个解决方案，但其中有重复。对于每个按钮（

SettingsButton

，

HelpButton

等），我都会编写

悬停

代码，以便将其传递给

图标

组件。有没有办法避免这种情况

以JS小提琴为例

const{ref}=Vue；
常量帮助图标={
模板：``，
道具：{
悬停：{
类型：布尔型，
要求：正确，
},
},
};
常量基本按钮={
模板：`
`,
};
常量帮助按钮={
组件：{BaseButton，HelpIcon}，
//每个按钮都必须有“mouseover”、“mouseleave”和“hover”ref
模板：`
帮助
`,
设置（）{
//每个按钮都有这个参考号
常数悬停=ref（假）；
返回{hover}；
}
};
Vue.createApp({
组件：{HelpButton}，
}).mount（“#app”）；

您可以使用

混音器

如：

const hoverable={
    props: {
        hover: {
            type: Boolean,
            required: true,
        },
    },   
}

然后将其添加到图标混合选项：

const HelpIcon = {
    template: `<div :style="{ 'background': hover ? 'blue' : '' }"></div>`,
     mixins:[hoverable]
};

然后：

 <BaseButton >
            <template #icon="{hover}" >
                <HelpIcon :hover="hover" />
            </template>

            <template #text>Help</template>
 </BaseButton>

帮助

---

为什么不在

BaseButton

？@YomS上注册事件处理程序呢。当我这样做时，我不能将

悬停

作为道具传递到

图标

插槽中的任何东西。@MattDeacalion可以在您尝试在basebutton上注册事件时给出解决方案

 <BaseButton >
            <template #icon="{hover}" >
                <HelpIcon :hover="hover" />
            </template>

            <template #text>Help</template>
 </BaseButton>