Vue 提供/注入
提供/注入 在 Vue 中用于将数据从一个组件提供给其他组件，特别是在大型项目中。
提供 使数据可用于其他组件。
注入 用于获取提供的数据。
提供/注入 是一种共享数据的方式，作为使用 props 传递数据的替代方案。
提供/注入
在一个大型项目中，组件包含在组件内部，使用 props 将数据从“App.vue”提供给子组件可能很困难，因为这需要在数据传递的每个组件中定义 props。
如果我们使用提供/注入而不是 props，我们只需要在提供数据的地方定义提供的数据，并且我们只需要在注入数据的地方定义注入的数据。
提供数据
我们使用 'provide' 配置选项使数据可用于其他组件
App.vue:
<template>
<h1>Food</h1>
<div @click="this.activeComp = 'food-about'" class="divBtn">About</div>
<div @click="this.activeComp = 'food-kinds'" class="divBtn">Kinds</div>
<div id="divComp">
<component :is="activeComp"></component>
</div>
</template>
<script>
export default {
data() {
return {
activeComp: 'food-about',
foods: [
{ name: 'Pizza', imgUrl: '/img_pizza.svg' },
{ name: 'Apple', imgUrl: '/img_apple.svg' },
{ name: 'Cake', imgUrl: '/img_cake.svg' },
{ name: 'Fish', imgUrl: '/img_fish.svg' },
{ name: 'Rice', imgUrl: '/img_rice.svg' }
]
}
},
provide() {
return {
foods: this.foods
}
}
}
</script>
在上面的代码中，'foods' 数组现在被提供，以便它可以在您的项目中其他组件中被注入。
注入数据
现在 'foods' 数组在 'App.vue' 中通过 'provide' 提供，我们可以将其包含在 'FoodKinds' 组件中。
通过在 'FoodKinds' 组件中注入 'foods' 数据，我们可以使用 'App.vue' 中的数据在 'FoodKinds' 组件中显示不同的食物。
示例
FoodKinds.vue:
<template>
<h2>Different Kinds of Food</h2>
<p><mark>In this application, food data is provided in "App.vue", and injected in the "FoodKinds.vue" component so that it can be shown here:</mark></p>
<div v-for="x in foods">
<img :src="x.imgUrl">
<p class="pName">{{ x.name }}</p>
</div>
</template>
<script>
export default {
inject: ['foods']
}
</script>
<style scoped>
div {
margin: 10px;
padding: 10px;
display: inline-block;
width: 80px;
background-color: #28e49f47;
border-radius: 10px;
}
.pName {
text-align: center;
}
img {
width: 100%;
}
</style>
