provide 和 inject 是 Vue 中用于跨组件传递数据的一对 API。provide 用于在祖先组件中提供数据，而 inject 用于在后代组件中注入这些数据。这种机制使得不需要通过一层一层的 props 传递数据，就可以在任何后代组件中获取祖先组件提供的数据。
在状态管理中，provide 和 inject 适用于一些全局或跨组件的数据共享场景，例如主题切换和语言切换。通过这对 API，可以在不依赖 Vuex 等状态管理工具的情况下，实现数据的全局共享和响应式更新。
1. 基本示例
父组件中：
<script setup>
import { ref, provide } from 'vue'
import { countSymbol } from './injectionSymbols'
// 提供静态值
provide('path', '/project/')
// 提供响应式的值
const count = ref(0)
provide('count', count)
// 提供时将 Symbol 作为 key
provide(countSymbol, count)
</script>子组件中：
<script setup>
import { inject } from 'vue'
import { countSymbol } from './injectionSymbols'
// 注入不含默认值的静态值
const path = inject('path')
// 注入响应式的值
const count = inject('count')
// 通过 Symbol 类型的 key 注入
const count2 = inject(countSymbol)
// 注入一个值，若为空则使用提供的默认值
const bar = inject('path', '/default-path')
// 注入一个值，若为空则使用提供的函数类型的默认值
const fn = inject('function', () => {})
// 注入一个值，若为空则使用提供的工厂函数
const baz = inject('factory', () => new ExpensiveObject(), true)
</script>2. 主题换肤示例
2.1. 提供主题
在祖先组件中使用 provide 提供主题数据：
// App.vue
<template>
<div :class="currentTheme">
<button @click="toggleTheme">Toggle Theme</button>
<ChildComponent />
</div>
</template>
<script>
export default {
data() {
return {
theme: 'light' // 默认主题
};
},
computed: {
currentTheme() {
return this.theme == 'light' ? 'theme-light' : 'theme-dark';
}
},
methods: {
toggleTheme() {
this.theme = this.theme === 'light' ? 'dark' : 'light';
}
},
provide() {
return {
theme: this.theme
};
}
};
</script>
<style>
.theme-light {
background-color: white;
color: black;
}
.theme-dark {
background-color: black;
color: white;
}
</style>2.2. 使用主题
在后代组件中使用 inject 注入主题数据：
// ChildComponent.vue
<template>
<div>
<p>Current theme: {{ theme }}</p>
</div>
</template>
<script>
export default {
inject: ['theme']
};
</script>2.3. 更新主题
为了使主题数据响应式，可以使用 Vue 的响应式机制，如 reactive 或 ref。下面是一个使用 ref 的例子：
// App.vue
<template>
<div :class="currentTheme">
<button @click="toggleTheme">Toggle Theme</button>
<childComponent />
</div>
</template>
<script>
import { ref, provide, computed } from 'vue';
export default {
setup() {
const theme = ref('light');
const toggleTheme = () => {
theme.value = theme.value === 'light' ? 'dark' : 'light';
};
const currentTheme = computed(() => (theme.value === 'light' ? 'theme-light' : 'theme-dark'));
provide('theme', theme);
return {
theme,
toggleTheme,
currentTheme
};
}
};
</script>
<style>
.theme-light {
background-color: white;
color: black;
}
.theme-dark {
background-color: black;
color: white;
}
</style>在子组件中：
// ChildComponent.vue
<template>
<div>
<p>Current theme: {{ theme }}</p>
</div>
</template>
<script>
import { inject } from 'vue';
export default {
setup() {
const theme = inject('theme');
return {
theme
};
}
};
</script>3. 语言切换示例
3.1. 提供语言
在祖先组件中使用 provide 提供语言数据：
// App.vue
<template>
<div>
<button @click="toggleLanguage">Toggle Language</button>
<childComponent />
</div>
</template>
<script>
export default {
data() {
return {
language: 'en' // 默认语言
};
},
methods: {
toggleLanguage() {
this.language = this.language === 'en' ? 'fr' : 'en';
}
},
provide() {
return {
language: this.language,
translations: {
en: {
greeting: 'Hello'
},
fr: {
greeting: 'Bonjour'
}
}
};
}
};
</script>3.2. 使用语言
在后代组件中使用 inject 注入语言数据：
// ChildComponent.vue
<template>
<div>
<p>{{ translation.greeting }}</p>
</div>
</template>
<script>
export default {
inject: ['language', 'translations'],
computed: {
translation() {
return this.translations[this.language];
}
}
};
</script>3.3. 更新语言
为了使语言数据响应式，可以使用 Vue 的响应式机制，如 reactive 或 ref。下面是一个使用 ref 的例子：
// App.vue
<template>
<div>
<button @click="toggleLanguage">Toggle Language</button>
<childComponent />
</div>
</template>
<script>
import { ref, provide } from 'vue';
export default {
setup() {
const language = ref('en');
const toggleLanguage = () => {
language.value = language.value === 'en' ? 'fr' : 'en';
};
const translations = {
en: {
greeting: 'Hello'
},
fr: {
greeting: 'Bonjour'
}
};
provide('language', language);
provide('translations', translations);
return {
language,
toggleLanguage
};
}
};
</script>在子组件中：
// ChildComponent.vue
<template>
<div>
<p>{{ translation.greeting }}</p>
</div>
</template>
<script>
import { inject, computed } from 'vue';
export default {
setup() {
const language = inject('language');
const translations = inject('translations');
const translation = computed(() => translations[language.value]);
return {
translation
};
}
};
</script>