lit componen event dispact in vue not working

huangapple go评论62阅读模式
英文:

lit componen event dispact in vue not working

问题

我正在尝试使用 Lit 创建一个 Web 组件,以便该组件可以在原生 JavaScript、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;
  }
}

我尝试在原生 JavaScript、Angular 和 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>

当我尝试添加 props "onClickRippleButton" 时,它会运行我在 Lit 组件中设置的 console.log。

但是,在 Vue 中,函数 "onHandleClick" 根本不运行,并且无法接收我从 Lit 组件中设置的参数。

在 Vue 中有没有办法获取我在 Lit 组件中设置的参数?

英文:

am trying to made web component with Lit, so that component can be consume on vanila js, react, angular and vue
So I created component with Lit like code below

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

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

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

  render() {
    return html`
      &lt;button @click=${this.handleClick}&gt;
        &lt;slot&gt;&lt;/slot&gt;
        )}
      &lt;/button&gt;
    `;
  }
}

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

I tried to run in vanilajs, angular, react with their own way, and it running well as expected
but not in vue

here my vue code

&lt;script&gt;
import &#39;component_from_lit_is_importedhere;
export default {
  data() {
    return {
      btnName:&#39;Cekidot gan&#39;
    };
  },
  methods: {

    onHanleClick(e){
      console.log(&quot;onHanleClick = &quot;, e)
    }
  }
}
&lt;/script&gt;

&lt;template&gt;
  &lt;button-ripple @onClickRippleButton=&quot;onHandleClick($event)&quot;&gt;{{btnName}}&lt;/button-ripple&gt;
&lt;/template&gt;


when I try put props "onClickRippleButton" it run console.log that I have set in lit element

but function "onHandleClick" in vue not running at all, and cannot receive argument that I've from Lit Component

is there any way in vue to get parameter that I set in Lit element?

答案1

得分: 0

避免在自定义事件的事件名称中使用动词前缀:建议不要在自定义事件的事件名称中使用像"on"这样的动词前缀。大多数现代框架会隐式处理事件绑定,因此在定义事件处理程序时不需要显式地使用"on"。例如,在Angular中,你可以简单地使用(close)="handle()",在Preact中,你可以使用onClose={this.handle}

Vue声明式事件绑定:Vue允许你监听从自定义元素分发的原生DOM事件。然而,在使用声明式事件绑定时,Vue只支持小写和短横线命名的事件名称。如果你想监听具有不同大小写的事件,你需要编写命令式的代码。

onClickRippleButton重命名为clickRippleButton之类的名称,并尝试以下代码:

handleClick(event: Event): void {
    console.log("handleClick from lit is running");

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

参考资料:

可重用UI组件API指南

Custom Elements Everywhere

英文:

Avoiding Verb Prefixes in Event Names: It's recommended not to use verb prefixes like "on" in event names for custom events. Most modern frameworks handle event binding implicitly, so you don't need to explicitly use "on" when defining event handlers. For example, in Angular, you can simply use (close)=&quot;handle(), and in Preact, you can use onClose={this.handle}

Vue Declarative Event Bindings: Vue allows you to listen to native DOM events dispatched from Custom Elements. However, when using declarative event bindings, Vue only supports lowercase and kebab case event names. If you want to listen for events with different cases, you'll need to write imperative code.

Rename onClickRippleButton to clickRippleButton something like and try

handleClick(event: Event): void {
    console.log(&quot;handleClick from lit is running&quot;);

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

References

Reusable UI Component API Guide

Custom Elements Everywhere

huangapple
  • 本文由 发表于 2023年7月27日 16:58:56
  • 转载请务必保留本文链接:https://go.coder-hub.com/76778116.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定