英文:
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 "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;
}
}
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
<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>
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);
}
参考资料:
英文:
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)="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("handleClick from lit is running");
let customEvent = new CustomEvent("clickRippleButton", {
bubbles: true,
composed: true,
detail: { value: "hello response from lit" },
});
this.dispatchEvent(customEvent);
}
References
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论