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