如何在HTML页面中收听svelte事件？
提问于 2022-11-29 09:50:37
我有一个简单的Svelte按钮组件如下所示。
<script lang="ts">
import { createEventDispatcher } from 'svelte';
import { idGenerator } from '../utils/helpers';
export let id = idGenerator();
export let label = 'Click';
export let styleClass: string = '';
const dispatch = createEventDispatcher();
const calculatedClasses = '...'
const buttonClicked = $event => {
console.log('TARGET', $event); // This console is outputting the click event.
dispatch('message', {text: 'Hello'});
}
</script>
<button on:click={buttonClicked} class={calculatedClasses()} id={id}>
{label}
</button>
<svelte:options tag="aurora-button"></svelte:options>main.ts如下：
export * from './lib/Button.svelte'我想听听index.html文件中按钮的单击事件，如下所示：
<body>
<script type="module" src="/src/main.ts"></script>
<aurora-button size="large" type="success" on:message="clicked()"></aurora-button>
<script>
function clicked($ev) {
console.log('EV', $ev);
}
</script>
</body>我无法侦听html文件中从Svelte组件发送的事件。我做得不对吗？我在网上看到的答案是使用Svelte组件的Svelte组件，它在另一个Svelte组件中使用。
在浏览器中，我得到了<aurora-button> was created with unknown prop 'on:message'。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-11-29 10:44:56
不能在普通HTML中使用Svelte语法。
on:...只是addEventListener的语法糖。所以你可以做这样的事：
<script type="module">
document.querySelector('aurora-button')
.addEventListener('message', e => console.log(e));
</script>(我不完全确定Svelte生成的自定义元素的初始化时间线，在添加事件侦听器之前注册元素可能很重要，因此type="module"使其在组件代码之后运行。)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74618253
复制相关文章
点击加载更多
腾讯云开发者
