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