根据关于 Props 的 Svelte 文档,我正在使用 props 将对父组件的引用传递给子组件。
Props 是“properties”的缩写,是您将数据从父组件传递到子组件的方法
这正是我想做的。这是一个带有我的代码的 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>
感谢 props,HTML<p>
元素可以清楚地引用父元素。但是,如何在子组件的 JavaScript 中引用父组件中的值?