# 使用场景

如果你想用vue2-context传递theme是完全可行的，你可以用它做多层嵌套，vue2-context会自动为你寻找最近的父级，并获取其映射的可变值

  1. 创建一个ThemeDisplay组件
<template>
  <div :class="context.value">theme display: {{ context.value }}</div>
</template>
1
2
3
  1. 在父组件中使用Provider包裹
<NestContextProvider :value="theme">
  <Child />
</NestContextProvider>

<script>
...
data() {
  return {
    theme: 'dark'
  }
}
...
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
  1. 在子组件中使用Provider包裹一层
<div :class="context.value" style="padding: 10px;">
  <ThemeDisplay />
  <NestContextProvider :value="childTheme">
    <ThemeDisplay />
  </NestContextProvider>
</div>

<script>
...
data() {
  return {
    context: useContext(nestContext, this),
    childTheme: 'light',
  }
}
...
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

即可获得如下效果

theme display: dark
theme display: light

←