vue中context如何傳值

Context API 允許跨元件傳遞數據，透過定義一個提供者元件來提供數據，然後使用 inject() 函數在後代元件中存取它。具體步驟包括：在提供者元件中使用 provide() 函數定義提供者元件。在需要存取共享資料的元件中使用 inject() 函數注入值。訪問注入的值。

Vue 中使用Context 傳遞值

Context 是Vue.js 生態系統中的一個API，它允許在組件樹中跨組件傳遞資料。它透過在提供者元件中定義一個值，然後在後代元件中透過 inject API 存取該值來實現。

如何使用 Context 傳遞值

建立提供者元件

使用 provide() 函數定義提供者元件。此元件將提供需要共享的資料。

import { provide } from 'vue';

export default {
  setup() {
    provide('myValue', 'Hello World!');
  }
}

注入值

在需要存取共享資料的元件中，使用 inject() 函數注入值。

import { inject } from 'vue';

export default {
  setup() {
    const myValue = inject('myValue');
    return { myValue };
  }
}

存取注入的值

注入的值現在可以在元件的範本或腳本中存取。

<template>
  <h1>{{ myValue }}</h1>
</template>

範例

考慮一個有父元件和子元件的元件樹。父元件提供一個值 'myValue'，子元件需要存取該值。

父元件(Provider.vue)

<script>
import { provide } from 'vue';

export default {
  setup() {
    provide('myValue', 'Hello World!');
  }
}
</script>

子元件(Consumer.vue)

<script>
import { inject } from 'vue';

export default {
  setup() {
    const myValue = inject('myValue');
    return { myValue };
  }
</script>

#結果

當Consumer.vue 渲染時，它將存取父元件提供的'myValue' 值並將其顯示在UI 中。

以上是vue中context如何傳值的詳細內容。更多資訊請關注PHP中文網其他相關文章！