如何在Vue js中避免按鈕嵌套

Question

所以我有一個按鈕，我想要多次使用，作為一個帶有插槽的元件

<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。我該如何解決？

Answer 1

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>