Bagaimana untuk mengelakkan sarang butang dalam Vue js

Question

Jadi saya mempunyai butang yang saya mahu gunakan beberapa kali, sebagai komponen dengan slot

<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>

Tetapi apabila saya ingin menggunakannya, saya tidak dapat menggunakan @click="method" pada butang slot, jadi saya menggunakan butang bersarang (saya mempunyai butang slot dan kemudian butang lain hanya untuk menggunakan @ click="method" ):

<template #checkAnswer>
        <button
          @click="checkAnswer"
          :disabled="isAnswerChecked"
          :class="{
            ' text-gray-300 border-gray-300  ': isAnswerChecked,
          }"
        >
          Check answer
        </button>
      </template>

Ini berfungsi, tetapi HTML tidak sah. Bagaimana saya boleh menyelesaikannya?

Answer 1

Taman Permainan Vue3 SFC

Anda perlu menggunakan v-bind="$attrs"将按钮组件的属性绑定到模板中的<button>上，并禁用模板的根元素的默认属性继承，使用inheritAttrs:false.

Selain itu, anda tidak perlu menggunakan slot bernama di sini, hanya gunakan yang lalai:

<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>

Komponen induk:

<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>