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?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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>