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')
// or provide a reactive state
// or provide a ref
const theme = ref('dark')
provide(THEME_KEY, computed(() => theme.value))
provide(THEME_KEY, theme)
// getter is also supported
provide(THEME_KEY, () => theme.value)

View File

@ -257,23 +257,54 @@ Vue-ECharts 支持如下事件:
### 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>
<summary>Vue 3</summary>
<summary>组合式 API</summary>
```js
import { THEME_KEY } from 'vue-echarts'
import { provide } from 'vue'
// 组合式 API
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: {
[THEME_KEY]: 'dark'
}
}
}
// Or make injections reactive
export default {
data() {
return {
theme: 'dark'
}
},
provide() {
return {
[THEME_KEY]: computed(() => this.theme)
}
}
}
```