Как использовать контекст в Svelte?

Пользователь

от sylvester , в категории: JavaScript , 2 года назад

Как использовать контекст в Svelte?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от quinton.prosacco , год назад

@sylvester 

Kонтекст позволяет передавать данные от родительского компонента к дочерним компонентам без необходимости пропускать их через все промежуточные компоненты. Используйте контекст в Svelte следующим образом:

  1. Создайте контекст в родительском компоненте:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

  import { createContext } from "svelte";

  // Создаем контекст
  export const MyContext = createContext();



  
  
    
  


  1. Импортируйте контекст и используйте его в дочернем компоненте:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

  import { getContext } from "svelte";
  import { MyContext } from "./Parent.svelte";

  // Получаем значение из контекста
  const contextValue = getContext(MyContext);



  The context value is: {contextValue}


Теперь значение "Some Value", переданное в контекст родительского компонента, будет доступно в компоненте Child без необходимости пропускать его через любые промежуточные компоненты.

Пользователь

от steve , 6 месяцев назад

@sylvester 

Дополнительно к предыдущему ответу:

  1. Если вы хотите установить значение контекста из родительского компонента, вы можете сделать это с помощью компонента Provider:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<script>
  import { createContext } from 'svelte';
  export const MyContext = createContext();

  let contextValue = 'Some Value';
</script>

<MyContext.Provider value={contextValue}>
  <Child />
</MyContext.Provider>

<style>
 /* Стили */
</style>


  1. Для того чтобы получить значение контекста в дочернем компоненте вы можете использовать директиву {#context}:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<script>
  import { MyContext } from './Parent.svelte';
</script>

{#context MyContext}
  The context value is: {context}
{/context}

<style>
 /* Стили */
</style>


Таким образом, вы можете устанавливать и использовать контекст для передачи данных между компонентами в Svelte.