docs: update provide/inject section

This commit is contained in:
Yue JIN
2025-05-20 18:27:52 +08:00
committed by GU Yiling
parent 05bd137cce
commit 756aa363f0
2 changed files with 40 additions and 9 deletions

View File

@ -268,9 +268,9 @@ import { provide } from 'vue'
provide(THEME_KEY, 'dark') provide(THEME_KEY, 'dark')
// or provide a reactive state // or provide a ref
const theme = ref('dark') const theme = ref('dark')
provide(THEME_KEY, computed(() => theme.value)) provide(THEME_KEY, theme)
// getter is also supported // getter is also supported
provide(THEME_KEY, () => theme.value) provide(THEME_KEY, () => theme.value)

View File

@ -257,24 +257,55 @@ Vue-ECharts 支持如下事件:
### Provide / Inject ### Provide / Inject
Vue-ECharts 为 `theme``init-options``update-options``loading-options` 提供了 provide/inject API以通过上下文配置选项。例如可以通过如下方式来使用 provide API 为 `init-options` 提供上下文配置: Vue-ECharts 为 `theme``init-options``update-options``loading-options` 提供了 provide/inject API以通过上下文配置选项。例如可以通过如下方式来使用 provide API 为 `theme` 提供上下文配置:
<details> <details>
<summary>Vue 3</summary> <summary>组合式 API</summary>
```js ```js
import { THEME_KEY } from 'vue-echarts' import { THEME_KEY } from 'vue-echarts'
import { provide } from 'vue' import { provide } from 'vue'
// 组合式 API
provide(THEME_KEY, 'dark') provide(THEME_KEY, 'dark')
// 选项式 API // or provide a ref
const theme = ref('dark')
provide(THEME_KEY, theme)
// getter is also supported
provide(THEME_KEY, () => theme.value)
```
</details>
<details>
<summary>选项式 API</summary>
```js
import { THEME_KEY } from 'vue-echarts'
import { computed } from 'vue'
export default {
{ {
provide: { provide: {
[THEME_KEY]: 'dark' [THEME_KEY]: 'dark'
} }
} }
}
// Or make injections reactive
export default {
data() {
return {
theme: 'dark'
}
},
provide() {
return {
[THEME_KEY]: computed(() => this.theme)
}
}
}
``` ```
</details> </details>