Как мне сослаться на родительский компонент компонента Svelte?

В соответствии с Документация Svelte по Props я использую реквизиты для передачи ссылки на родительский компонент дочернему элементу.

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

Это именно то, чем я хочу заниматься. Вот 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 дочернего компонента?


4
3 418
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>