Svelte-将变量从父组件传递到其所有子组件

时间:2020-09-23 07:54:44

标签: javascript svelte

我需要将数据从父组件传递到所有子组件,可能是链中的3-4级。为此,使用事件并不是一个很好的解决方案。

是否有一种方法可以定义该组件的所有子组件都可以访问的全局变量?

我也不愿使用params,因为会有很多重复。

2 个答案:

答案 0 :(得分:3)

正是由于这个确切的问题,ContextAPI被包含在Svelte中

在你的“父母”中做

import { setContext } from 'svelte'

setContext('my-var', variable)

以及在您需要的任何孩子中,您都可以这样做:

import { getContext } from 'svelte'

const variable = getContext('my-var')

该技术在所有后代中都使 my-var 变。

请注意,如果您需要传递商店而不是常规变量,则此变量是不是反应性的。

这里是docs

答案 1 :(得分:0)

您可以使用<script context="module">

具有<script>属性的context="module"标记在 模块首先评估,而不是针对每个组件实例进行评估。 可从常规<script>中访问此块中声明的值 (以及组件标记),反之亦然。

https://svelte.dev/docs#script_context_module