Lit组件自定义事件在Vue中不生效，如何接收参数？

问题分析 #

你开发的Lit Web Component在Vue中无法触发自定义事件，核心问题有两个：

1. Vue代码存在方法名拼写错误
2. Vue事件处理机制会自动将驼峰事件名转为短横线小写，和Lit定义的驼峰事件名不匹配

解决方案 #

步骤1：修正方法名拼写错误 #

你的Vue代码里方法定义为onHanleClick（缺少字母d），但模板绑定的是onHandleClick，先修正这个拼写问题：

<script>
import './path-to-button-ripple.js';
export default {
  data() {
    return {
      btnName:'Cekidot gan'
    };
  },
  methods: {
    // 修正拼写为onHandleClick
    onHandleClick(e){
      console.log("onHandleClick = ", e);
      // 通过e.detail获取Lit传递的参数
      console.log("Received value: ", e.detail.value);
    }
  }
}
</script>

步骤2：调整自定义事件名（推荐方案） #

Web Component自定义事件名推荐使用短横线分隔的小写格式，可避免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("on-click-ripple-button", {
      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;
  }
}

然后在Vue模板中绑定修正后的事件名：

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

备选方案：配置Vue识别自定义元素（保留驼峰事件名） #

如果不想修改Lit组件的事件名，可配置Vue识别自定义元素，避免自动转换事件名：

Vue3 + Vite配置示例

在vite.config.js中添加自定义元素识别规则：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue({
    template: {
      compilerOptions: {
        // 匹配所有以button-开头的自定义元素
        isCustomElement: tag => tag.startsWith('button-')
      }
    }
  })]
})

配置后，Vue模板可直接使用原驼峰事件名：

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

Vue2配置示例

在vue.config.js中添加忽略元素规则：

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options.compilerOptions = {
          ...options.compilerOptions,
          ignoredElements: ['button-ripple']
        }
        return options
      })
  }
}

同时在模板中使用.native修饰符监听事件：

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

验证结果 #

完成上述修改后，点击button-ripple组件，Vue的onHandleClick方法会正常触发，通过e.detail.value即可获取Lit组件传递的hello response from lit参数。

内容的提问来源于stack exchange，提问作者Widdesto Yudistiro