从一个苗条的组件中触发事件并从包含页面中听到它
Firing events from a svelte component and hearing it from containing page
我的组件中有这段代码与
example in the svelte docs:
export default {
methods: {
assessmentMouseover(e) {
const event = new CustomEvent('assessment-mouseover', {
detail: 'something',
bubbles: true,
cancelable: true,
composed: true, // makes the event jump shadow DOM boundary
})
this.dispatchEvent(event)
},
},
// -- snip --
}
然后我在 HTML 页面的脚本标签中有这段代码来实例化它
与 svelte 文档基本相同的组件:
const el = document.querySelector('#radar');
el.addEventListener('assessment-mouseover', event => {
console.log('got here')
});
但是,当我触发该事件时,出现此错误:this.dispatchEvent is not a function
。
我在 this.dispatchEvent()
上尝试了很多变体,比如
dispatchEvent()
,既不报错也不触发监听器;
和 window.dispatchEvent()
也无法触发。
我做错了什么?
工作案例回复:https://svelte.technology/repl?version=2.15.3&gist=7b0b820ce452cf6d5d10ebf456627651
Test.html:
<button id="{id}" on:mouseover="doMouseOver(event)">
{isOver}
</button>
<script>
export default {
data() {
return {
isOver: 'Over Me!'
}
},
methods: {
doMouseOver(e) {
const event = new CustomEvent('assessment-mouseover', {
detail: Math.random(),
bubbles: true,
cancelable: true,
composed: true, // makes the event jump shadow DOM boundary
})
//this.dispatchEvent(event)
let source = e.target || e.srcElement
source.dispatchEvent(event)
}
}
}
</script>
App.html:
<h1>From Test: {text}</h1>
<Test id="radar"/>
<script>
export default {
components: {
Test: './Test.html'
},
data() {
return {
text: 'Wait for over'
}
},
oncreate() {
const el = document.querySelector('#radar')
el.addEventListener('assessment-mouseover', event => {
this.set({text: event.detail})
})
},
}
</script>
我的组件中有这段代码与 example in the svelte docs:
export default {
methods: {
assessmentMouseover(e) {
const event = new CustomEvent('assessment-mouseover', {
detail: 'something',
bubbles: true,
cancelable: true,
composed: true, // makes the event jump shadow DOM boundary
})
this.dispatchEvent(event)
},
},
// -- snip --
}
然后我在 HTML 页面的脚本标签中有这段代码来实例化它 与 svelte 文档基本相同的组件:
const el = document.querySelector('#radar');
el.addEventListener('assessment-mouseover', event => {
console.log('got here')
});
但是,当我触发该事件时,出现此错误:this.dispatchEvent is not a function
。
我在 this.dispatchEvent()
上尝试了很多变体,比如
dispatchEvent()
,既不报错也不触发监听器;
和 window.dispatchEvent()
也无法触发。
我做错了什么?
工作案例回复:https://svelte.technology/repl?version=2.15.3&gist=7b0b820ce452cf6d5d10ebf456627651
Test.html:
<button id="{id}" on:mouseover="doMouseOver(event)">
{isOver}
</button>
<script>
export default {
data() {
return {
isOver: 'Over Me!'
}
},
methods: {
doMouseOver(e) {
const event = new CustomEvent('assessment-mouseover', {
detail: Math.random(),
bubbles: true,
cancelable: true,
composed: true, // makes the event jump shadow DOM boundary
})
//this.dispatchEvent(event)
let source = e.target || e.srcElement
source.dispatchEvent(event)
}
}
}
</script>
App.html:
<h1>From Test: {text}</h1>
<Test id="radar"/>
<script>
export default {
components: {
Test: './Test.html'
},
data() {
return {
text: 'Wait for over'
}
},
oncreate() {
const el = document.querySelector('#radar')
el.addEventListener('assessment-mouseover', event => {
this.set({text: event.detail})
})
},
}
</script>