面试题：Vue中Provide/Inject在主题切换中的基础应用

Question

在Vue项目中，简单描述如何使用Provide/Inject机制来传递主题相关的变量，以实现主题切换的初步逻辑？请举例说明至少一个在Provide中传递的主题变量及在Inject中如何接收并使用它。

Answer 1

1. 在 Provide 中传递主题相关变量：
   • 在父组件（通常是较高层级的组件，如 App.vue）中，使用 provide 选项来提供主题相关变量。
   • 例如，假设我们有一个主题颜色变量 primaryColor：

   <template>
     <div id="app">
       <child - component></child - component>
     </div>
   </template>
   
   <script>
   import ChildComponent from './components/ChildComponent.vue';
   
   export default {
     components: {
       ChildComponent
     },
     provide() {
       return {
         primaryColor: '#1890ff'
       };
     }
   };
   </script>
   

2. 在 Inject 中接收并使用变量：
   • 在子组件（如 ChildComponent.vue）中，使用 inject 选项来接收父组件提供的变量。
   • 然后就可以在组件中使用这个变量，比如设置元素的颜色：

   <template>
     <div>
       <p :style="{ color: primaryColor }">这段文字的颜色会根据主题颜色变化</p>
     </div>
   </template>
   
   <script>
   export default {
     inject: ['primaryColor']
   };
   </script>
   

3. 实现主题切换初步逻辑：
   • 要实现主题切换，可以在父组件中提供一个切换主题的方法，同时更新主题相关变量。
   • 例如，添加一个 toggleTheme 方法：

   <template>
     <div id="app">
       <button @click="toggleTheme">切换主题</button>
       <child - component></child - component>
     </div>
   </template>
   
   <script>
   import ChildComponent from './components/ChildComponent.vue';
   
   export default {
     components: {
       ChildComponent
     },
     data() {
       return {
         currentPrimaryColor: '#1890ff'
       };
     },
     provide() {
       return {
         primaryColor: this.currentPrimaryColor,
         toggleTheme: this.toggleTheme
       };
     },
     methods: {
       toggleTheme() {
         this.currentPrimaryColor = this.currentPrimaryColor === '#1890ff'? '#ff4d4f' : '#1890ff';
       }
     }
   };
   </script>
   

   • 在子组件中，也可以通过注入的 toggleTheme 方法来触发主题切换：

   <template>
     <div>
       <p :style="{ color: primaryColor }">这段文字的颜色会根据主题颜色变化</p>
       <button @click="toggleTheme">子组件内切换主题</button>
     </div>
   </template>
   
   <script>
   export default {
     inject: ['primaryColor', 'toggleTheme']
   };
   </script>