如何从 Svelte 脚本标签内的父级访问组件道具？答案

【问题标题】：How to access a component prop from parent inside the script tag in Svelte?如何从 Svelte 脚本标签内的父级访问组件道具？
【发布时间】：2021-08-10 22:20:03
【问题描述】：

我只是从 Svelte 开始。我有一个搜索栏组件和该组件的唯一实例：main_searchbar。我想从另一个组件集中该组件。

所以我在 searchbar.svelte 中导出输入：

<script>
    export let value = '';
    export let input;
</script>

<span class="searchbar">
    <input
        class="search"
        type="text"
        name="search"
        bind:value
        bind:this={input}
    >
</span>

然后我在 main_searchbar.svelte 中导入：

<script context="module">
    import Searchbar from './searchbar.svelte';
    export let obj;
</script>

<Searchbar bind:this={obj}/>

然后我创建一个焦点按钮：

<script>
        import {obj} from './main_searchbar.svelte';
        
        function focus() {
            obj.input.focus();
        }
</script>

<button on:click={focus}>Focus</button>

最后是 App.svelte：

<script>
    import Main_searchbar from './main_searchbar.svelte'
    import Focus from './focus.svelte'
</script>

<Main_searchbar/>
<Focus/>

当然这不起作用： https://svelte.dev/repl/c4eb67950c6240e593173431edb18e1a?version=3.38.2 在 Svelte 中执行此操作的正确方法是什么？

【问题讨论】：

svelte 怎么知道obj 指向什么？如果您有多个 searchbar.svelte 实例，哪一个会获得焦点？我认为您应该选择商店或发送活动。

标签： javascript svelte svelte-3

【解决方案1】：

Svelte 附带stores，这是一种管理全局状态的非常简洁的方法；有了这些，您不必在组件之间传递引用。这是使用可写存储的简化解决方案：

store.js

import { writable } from 'svelte/store';
// An observable string value.
export const focused = writable('');

searchbar.svelte

<script>
    import { focused } from './store'
    export let target;
    let input;
    
    // When the value of the "focused" store is equal to target, 
    //    call focus() on the input.
    focused.subscribe((v) => {
        if(v === target) {
            input.focus()
            // Because subscribe only notifies us of changes,
            //   we have to reset the store or the focus button 
            //   will stop working.
            focused.set('');
        }
    })
</script>

<span class="searchbar">
    <input bind:this={input} />
</span>

focus.svelte

<script>
    import { focused } from './store';
    export let targeting;
        
    // Use the .set() method to set the value of our `focused` store,
    //   triggering all our subscribers (like the one in searchbar.svelte).     
    const focus = () => focused.set(targeting)
</script>

<button on:click={focus}>Focus</button>

App.svelte

<script>
    import Searchbar from './searchbar.svelte'
    import Focus from './focus.svelte'

    // target and targeting must match. 
    // This allows you to reuse the focus component!
</script>

<Searchbar target="search" />
<Focus targeting="search" />

REPL

【讨论】：

【解决方案2】：

要解决您的问题，您可以将以下行添加到Searchbar.svelte

<svelte:options accessors/>

但是你的设置感觉很“不苗条”，如果我是你，我会重新考虑架构。

【讨论】：