代码之家 › 专栏 › 技术社区 › mikemaccana

如何引用苗条组件的父组件?

svelte-component svelte javascript

1

mikemaccana · 技术社区 · 7 年前

根据 Svelte documentation on Props 我正在使用道具将对父组件的引用传递给子组件。

Props是properties的缩写,是将数据从父组件传递到子组件的方法

这正是我想做的。这是 a Svelte REPL with my code ,也复制如下:

我父母是 应用程序.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>

子组件是 小部件.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 回复 | 直到 6 年前

1

3

Rich Harris 7 年前

在生命周期钩子和方法中,访问状态 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>