JHipster 8中Shadcn Vue组件无法绑定事件监听器求助

核心原因：Shadcn Vue的Button组件基于Radix Vue构建，Vue3默认不会将组件上绑定的原生事件自动传递到组件内部的根元素，若Button组件模板未配置事件转发逻辑，父组件绑定的@click就无法触发。

解决方案： #

• 传递属性与事件到Radix原生组件：修改Button组件模板，确保内部的ButtonPrimitive使用v-bind="$attrs"，将父组件传递的所有属性、事件直接绑定到Radix的原生按钮组件上：

  <template>
    <ButtonPrimitive
      :class="buttonVariants({ variant, size, class: $attrs.class })"
      v-bind="$attrs"
    >
      <slot />
    </ButtonPrimitive>
  </template>
  

• 转发事件到外层容器：如果Button组件外层有自定义容器（如div），需在容器元素上添加v-on="$attrs"，将事件转发到容器上：

  <template>
    <div :class="buttonVariants(...)" v-on="$attrs">
      <ButtonPrimitive>
        <slot />
      </ButtonPrimitive>
    </div>
  </template>
  

• 排查CSS拦截：检查Button组件的样式，确认没有设置pointer-events: none属性，该属性会阻止元素接收点击事件，若存在则移除。

内容的提问来源于stack exchange，提问作者Hon Wi Cong