我尝试用Lit做web组件，这样组件就可以在vanila js，react，angular和vue上使用。所以我用Lit创建了下面的代码

import { html, LitElement } from "lit";
import { customElement } from "lit/decorators.js";

@customElement("button-ripple")
export class ButtonRipple extends LitElement {
  handleClick(event: Event): void {
    console.log("handleClick from lit is running");

    let customEvent = new CustomEvent("onClickRippleButton", {
      bubbles: true,
      composed: true,
      detail: { value: "hello response from lit" },
    });
    this.dispatchEvent(customEvent);
  }

  render() {
    return html`
      <button @click=${this.handleClick}>
        <slot></slot>
        )}
      </button>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "button-ripple": ButtonRipple;
  }
}

字符串
我试着运行在vanilajs，角，用自己的方式React，它运行良好，如预期，但不是在vue
这里是我Vue代码

<script>
import 'component_from_lit_is_importedhere;
export default {
  data() {
    return {
      btnName:'Cekidot gan'
    };
  },
  methods: {

    onHanleClick(e){
      console.log("onHanleClick = ", e)
    }
  }
}
</script>

<template>
  <button-ripple @onClickRippleButton="onHandleClick($event)">{{btnName}}</button-ripple>
</template>

型
当我尝试把 prop “onClickRippleButton”它运行console.log，我已经在点燃元素设置
但是vue中的函数“onHandleClick”根本没有运行，并且无法接收我从Lit组件中获得的参数
在vue中有什么方法可以获取我在Lit元素中设置参数吗？