如何引用 Svelte 组件的父组件？

Question

根据Props的Svelte文档，我使用Props将对父组件的引用传递给子组件。

Props，"属性"的缩写，是将数据从父组件传递到子组件的方法

这正是我想要做的。这是我的代码的Svelte REPL，也复制在下面：

我的父母是App.html:

<div class='widget-container'>
<Widget foo bar="static" {baz}/>
</div>
<script>
import Widget from './Widget.html';
export default {
data: function(){ 
return {
baz: 'click me and check the console'
}
},
components: {
Widget
}
};
</script>

子组件是Widget.html:

<p>foo: {foo}</p>
<p>bar: {bar}</p>
<p>baz: {baz}</p>
<script>
export default {
oncreate: function(){
window.document.body.addEventListener('click', function(event){
console.log(`Clicked!, ${baz}`)
});
}
}
</script>   

多亏了这些道具，HTML<p>元素可以清楚地引用父元素。但是如何在子组件的JavaScript中引用父组件中的值

Answer 1

在生命周期挂钩和方法内部，使用this.get():访问状态

<p>foo: {foo}</p>
<p>bar: {bar}</p>
<p>baz: {baz}</p>
<script>
export default {
oncreate: function(){
window.document.body.addEventListener('click', () => {
const { baz } = this.get();
console.log(`Clicked!, ${baz}`)
});
}
}l
</script>