所以我有一個按鈕，我想要多次使用，作為一個帶有插槽的元件
<div
name="checkAnswer"
class="w-[70%] mx-[15%] flex items-center justify-center"
>
<button
class="p-3 rounded-3xl shadow-md font-bold m-4 px-10 border-2 border-grey-800 hover:border-black hover:transition-all hover:duration-500"
>
<slot name="checkAnswer"></slot>
</button>
</div>
但是當我想要使用它時，我無法在插槽按鈕上使用@click="method"，所以我使用了一個嵌套按鈕（我有一個插槽按鈕，然後另一個按鈕只是用來使用@click="method"）：
<template #checkAnswer>
<button
@click="checkAnswer"
:disabled="isAnswerChecked"
:class="{
' text-gray-300 border-gray-300 ': isAnswerChecked,
}"
>
Check answer
</button>
</template>
這樣可以工作，但它是無效的HTML。我該如何解決？
Vue3 SFC Playground
您需要使用
v-bind="$attrs"將按鈕組件的屬性綁定到模板中的<button>上，並禁用模板的根元素的預設屬性繼承，使用inheritAttrs:false。此外，您不需要在這裡使用命名插槽，只需使用預設插槽：
<script> export default { inheritAttrs: false, // 这是禁用属性继承的设置 }; </script> <template> <div name="checkAnswer" class="w-[70%] mx-[15%] flex items-center justify-center" > <button v-bind="$attrs" class="p-3 rounded-3xl shadow-md font-bold m-4 px-10 border-2 border-grey-800 hover:border-black hover:transition-all hover:duration-500" > <slot></slot> </button> </div> </template>父元件：
<script setup> import MyButton from './MyButton.vue'; import {ref} from 'vue'; const isAnswerChecked = ref(false); const checkAnswer = () => { alert('check answer!'); isAnswerChecked.value = true; }; </script> <template> <MyButton @click="checkAnswer" :disabled="isAnswerChecked" :class="{ ' text-gray-300 border-gray-300 ': isAnswerChecked, }" > Check answer </MyButton> </template>