svelte定制元素createEventDispatcher无法工作
svelte定制元素createEventDispatcher无法工作
提问于 2021-01-31 09:16:41
我试图使用createEventDispatcher从父组件中捕获子组件的事件，但似乎不起作用。如果删除自定义元素，dispatcher事件就能工作。我是做错了什么，还是瘦自定义元素不支持dispatcher事件？
子组件Inner.svelte
<svelte:options tag="my-inner"/>
<script>
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
function sayHello() {
dispatch('message', {
text: 'Hello!'
});
}
</script>
<button on:click={sayHello}>
Click to say hello
</button>父组件App.svelte
<svelte:options tag="my-app" />
<script>
import {} from './Inner.svelte';
function handleMessage(event) {
alert(event.detail.text);
}
</script>
<my-inner on:message={handleMessage}></my-inner>我的rollup.config.js设置
plugins: [
svelte({
compilerOptions: {
customElement: true,
tag: null
},
}),回答 1
Stack Overflow用户
发布于 2021-01-31 10:29:26
这是众所周知的问题。至少在3.32和之前，事件不会从编译成自定义元素的svelte组件中发出。
请参阅https://github.com/sveltejs/svelte/issues/3119
这篇文章讨论了各种解决办法，但这取决于你的用法。简单的一个似乎发出了一个事件：
import { createEventDispatcher } from 'svelte';
import { get_current_component } from 'svelte/internal';
const component = get_current_component();
const svelteDispatch = createEventDispatcher();
const dispatch = (name, detail) => {
svelteDispatch(name, detail);
component.dispatchEvent && component.dispatchEvent(new CustomEvent(name, { detail }));
// or use optional chaining (?.)
// component?.dispatchEvent(new CustomEvent(name, { detail }));
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65977461
复制相关文章
相似问题
腾讯云开发者
