vue 中使用 provide 和 inject 实现跨层级传递数据的技巧
在 Vue 的开发中，组件之间的传递数据是非常常见的需求。通常情况下，我们可以通过 props 和 emit 方法来实现组件之间的数据传递，但是当组件之间存在多层嵌套时，这种方式就会变得比较繁琐，而且非常容易出现代码耦合的情况。这时，Vue 中的 provide 和 inject 就可以派上用场了。
provide 和 inject 是 Vue 2.2.0 版本中引入的新特性，这两个 API 可以方便地实现逐层向下传递数据的操作。在下面的例子中，我们将通过一个具有多层嵌套组件的示例来演示如何利用 provide 和 inject 实现数据的跨层级传递。
假设我们有以下的多层嵌套组件：
<template>
<div>
<child1></child1>
</div>
</template>
<script>
import child1 from './child1.vue';
export default {
components: {
child1
}
};
</script><template>
<div>
<child2></child2>
</div>
</template>
<script>
import child2 from './child2.vue';
export default {
components: {
child2
}
};
</script><template>
<div>
<p>{{message}}</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/1461" title="VIVA"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680148246307.png" alt="VIVA" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/1461" title="VIVA">VIVA</a>
<p>一个免费的AI创意视觉设计平台</p>
</div>
<a href="/ai/1461" title="VIVA" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<grandchild></grandchild>
</div>
</template>
<script>
import grandchild from './grandchild.vue';
export default {
data() {
return {
message: 'Hello Vue!'
};
},
components: {
grandchild
}
};
</script><template>
<div>
<p>{{message}}</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</div>
</template>
<script>
export default {
inject: ['message']
};
</script>在这个示例中，我们希望在 Grandchild 组件中获取到 Parent 组件中定义的 message 数据。下面是具体的实现方式：
在 Parent 组件中使用 provide 属性来提供需要传递的数据：
<template>
<div>
<child1 :message="message"></child1>
</div>
</template>
<script>
export default {
provide: {
message: 'Hello Vue!'
}
};
</script>在 Grandchild 组件中使用 inject 属性来注入 provide 提供的数据：
<template>
<div>
<p>{{message}}</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</div>
</template>
<script>
export default {
inject: ['message']
};
</script>通过这种方式，Grandchild 组件就可以轻松获取到 Parent 组件中提供的 message 数据了。
除了在 provide 和 inject 中使用固定的数据之外，我们也可以在 provide 和 inject 中使用方法来提供和获取数据。例如，在 Parent 组件中提供一个方法来动态设置 message 数据：
<template>
<div>
<child1 :set-message="setMessage"></child1>
</div>
</template>
<script>
export default {
provide() {
return {
setMessage: message => {
this.message = message;
}
};
},
data() {
return {
message: 'Hello Vue!'
};
}
};
</script>在 Child1 组件中调用 setMessage 方法来设置 message 数据：
<template>
<div>
<child2 :message="message"></child2>
<button @click="setMessage">Set Message</button>
</div>
</template>
<script>
export default {
props: ['setMessage'],
data() {
return {
message: 'Hello World!'
};
}
};
</script>在 Grandchild 组件中通过 inject 属性注入 setMessage 方法：
<template>
<div>
<p>{{message}}</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<button @click="setMessage">Set Parent Message</button>
</div>
</template>
<script>
export default {
inject: ['setMessage', 'message']
};
</script>通过这种方式，Grandchild 组件就可以调用 Parent 组件中的 setMessage 方法来动态地设置 message 数据了。
总结：
通过使用 provide 和 inject 属性，我们可以方便地实现跨层级传递数据的目的。在使用这两个属性时，需要注意避免深层次的嵌套和组件耦合的情况，以达到代码简洁和可维护性的目标。
