13.（vue3.x+vite）组件间通信方式之provide与inject

前端技术社区总目录（订阅之前请先查看该博客）

示例效果

依赖注入Provide / Inject

在父子组件传递数据时，通常使用的是 props 和 emit，父传子时，使用的是 props，如果是父组件传孙组件时，就需要先传给子组件，子组件再传给孙组件，如果多个子组件或多个孙组件使用时，就需要传很多次，会很麻烦。
像这种情况，可以使用 provide 和 inject 解决这种问题，不论组件嵌套多深，父组件都可以为所有子组件或孙组件提供数据，父组件使用 provide 提供数据，子组件或孙组件 inject 注入数据。

props子组件是不可以修改祖先组件的数据，而Provide子组件不受单向数据流的限制，是可以修改祖先组件的数据。

父组件代码

<template>
  <