Vue js에서 버튼 중첩을 피하는 방법

Question

그래서 슬롯이 있는 구성요소로 여러 번 사용하고 싶은 버튼이 생겼습니다

으아악

그런데 사용하고 싶을 때 슬롯 버튼에 @click="method"를 사용할 수 없어서 중첩 버튼을 사용했습니다(슬롯 버튼이 있었고 그 뒤에 @click="method"를 사용하기 위해 다른 버튼이 있었습니다) )：

으아악

이 방법은 작동하지만 잘못된 HTML입니다. 어떻게 해결할 수 있나요?

Answer 1

Vue3 SFC 놀이터

v-bind="$attrs"将按钮组件的属性绑定到模板中的<button>上，并禁用模板的根元素的默认属性继承，使用inheritAttrs:false를 사용해야 합니다.

또한 여기서는 명명된 슬롯을 사용할 필요가 없으며 기본 슬롯만 사용하세요.

으아아아

상위 구성요소:

으아아아