Question

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

道具（“属性”的缩写）是将数据从父组件传递到子组件的方法

这正是我想要做的。这是a Svelte REPL with my code，也复制到下面：

我的父母是 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中引用父组件中的值？

Answer 1

在生命周期挂钩和方法中，使用src/test/java访问状态：

this.get()

如何引用Svelte组件的父组件？

1 个答案: