如何引用Svelte组件的父组件？
如何引用Svelte组件的父组件？
提问于 2018-07-25 16:16:31
根据关于道具的精巧文档，我使用道具将父组件的引用传递给子组件。
道具是“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> 多亏了这些道具，HTML <p>元素可以清楚地引用父元素。但是，，如何引用子组件的JavaScript?中父组件中的值？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-25 17:26:14
在生命周期钩子和方法中，使用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> 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51523499
复制相关文章
相似问题
腾讯云开发者
