将道具从孙子传递给父母而无需导出 svelte答案

【问题标题】：Pass the props from grandchild to parent without exporting in svelte将道具从孙子传递给父母而无需导出 svelte
【发布时间】：2022-12-20 09:27:27
【问题描述】：

我有一个具有导出道具的按钮组件（孙子）（如下所示）

<script>
    export let buttonText = "";
</script>

<button>
    {buttonText}
</button>

在里面零件我导入这个按钮。但是我不想将数据传递给这里的道具。

<script>
import Button from './Button.svelte';
</script>

<h1>
    Hello from the component
    <br>
    <Button buttonText=""/>
</h1>

笔记：我还没有从组件中导出 buttonText

我想打电话给零件从父级并将数据传递给按钮文本

<script>
    import Component from './Component.svelte'
</script>

<Component buttonText="Hello"/>

我可以不导出吗？

我想要这样做的原因是，我有许多子组件，例如按钮、表单等被导入到组件中。我已经从组件本身导出了一些道具。通过导出子组件的 props，我最终会得到一团乱七八糟的导出，包括重复项。

如果这不可能，有没有更好的方法？

【问题讨论】：

标签： javascript svelte sveltekit

【解决方案1】：

您可以使用 setContext 通过 setContext 将数据从父对象设置到子对象或从子对象获取数据，等等。

父母：

import { setContext } from "svelte"; 
    
let btnTxt = "Button Text";
setContext("getBtnTxt", btnTxt"}

孙子

import { getContext } from "svelte";

let btnTxt = getContext("getBtnTxt")

但是还有其他方法可以设置和从父级获取数据。例子：

const ctxFilters = { a: false, b: false, c: false };
setContext("ctxFilters", {
  get filters() {
    return ctxFilters;
  },
  set filters(obj) {
    Object.assign(ctxFilters, obj);
  },
});

在一个孩子身上：

const filterCtx = getContext("ctxFilters");
let filters = filterCtx.filters;  // use the getter
...
filterCtx.filters = filters;  // or use the setter

【讨论】：