Per the Svelte documentation on Props I am using props to pass a reference to the parent ponent to a child.

Props, short for 'properties', are the means by which you pass data down from a parent to a child ponent

That's exactly what I want to do. Here is a Svelte REPL with my code, that is also copied below:

My parent is 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'
            }
        },
        ponents: {
            Widget
        }
    };
</script>

The child ponent is 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>   

Thanks to the props, the HTML <p> elements can clearly reference the parent. However how can I reference the values in the parent ponent in the child ponent's JavaScript?

Per the Svelte documentation on Props I am using props to pass a reference to the parent ponent to a child.

Props, short for 'properties', are the means by which you pass data down from a parent to a child ponent

That's exactly what I want to do. Here is a Svelte REPL with my code, that is also copied below:

My parent is 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'
            }
        },
        ponents: {
            Widget
        }
    };
</script>

The child ponent is 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>   

Thanks to the props, the HTML <p> elements can clearly reference the parent. However how can I reference the values in the parent ponent in the child ponent's JavaScript?

• javascript
• svelte
• svelte-ponent
• svelte-2

Share Improve this question Follow edited Jul 1, 2019 at 7:53 Thaddeus Albers 4,19255 gold badges3636 silver badges4343 bronze badges asked Jul 25, 2018 at 16:16 mikemaccanamikemaccana 124k110110 gold badges432432 silver badges534534 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Inside lifecycle hooks and methods, access state with 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>