Comment éviter l'imbrication des boutons dans Vue js

Question

J'ai donc un bouton que je souhaite utiliser plusieurs fois, comme composant avec un 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>

Mais quand j'ai voulu l'utiliser, je ne pouvais pas utiliser @click="method" sur le bouton de l'emplacement, j'ai donc utilisé un bouton imbriqué (j'avais un bouton d'emplacement puis un autre bouton juste pour utiliser @ click="method" )：

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

Cela fonctionne, mais c'est du HTML invalide. Comment puis-je le résoudre?

Answer 1

Aire de jeux Vue3 SFC

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

De plus, vous n'avez pas besoin d'utiliser des emplacements nommés ici, utilisez simplement ceux par défaut :

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

Composant parent :

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