provide 和 inject 实现跨层级组件通信的示例

<template>
  <div :class="`theme-${currentTheme}`">
    <h1>Provide/Inject 示例</h1>
    <button @click="toggleTheme">切换主题</button>
    <ParentComponent />
  </div>
</template>

<script>
import { provide, ref } from 'vue'
import ParentComponent from './ParentComponent.vue'

export default {
  components: { ParentComponent },
  setup() {
    // 定义响应式的主题变量
    const currentTheme = ref('light')
    
    // 切换主题的方法
    const toggleTheme = () => {
      currentTheme.value = currentTheme.value === 'light' ? 'dark' : 'light'
    }
    
    // 提供主题相关的数据和方法
    provide('themeConfig', {
      currentTheme,
      toggleTheme
    })
    
    return {
      currentTheme,
      toggleTheme
    }
  }
}
</script>

<style>
.theme-light {
  background-color: white;
  color: black;
}

.theme-dark {
  background-color: #333;
  color: white;
}

button {
  padding: 8px 16px;
  margin: 20px 0;
  cursor: pointer;
}
</style>