So vermeiden Sie die Verschachtelung von Schaltflächen in Vue js

Question

Ich habe also einen Knopf, den ich mehrfach verwenden möchte, als Komponente mit Steckplatz

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

Aber als ich es verwenden wollte, konnte ich die @click="Methode" nicht für die Slot-Schaltfläche verwenden, also habe ich eine verschachtelte Schaltfläche verwendet (ich hatte eine Slot-Schaltfläche und dann eine andere Schaltfläche, nur um die @click="Methode" zu verwenden) )：

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

Das funktioniert, aber es ist ungültiges HTML. Wie kann ich es lösen?

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>