组件传值 provide 和 inject
<p>当需要从父组件向子组件传递数据时，我们使用 props。
但有一些深度嵌套的组件，而深层的子组件只需要父组件的部分内容，如果仍然将 prop 沿着组件链逐级传递下去，可能会很麻烦。
对于这种情况，可以使用 provide 和 inject。
无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。
这个特性有两个部分：父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这些数据。</p>
<pre><code class="language-javascript">App.vue
&lt;template&gt;
&lt;Parent&gt;&lt;/Parent&gt;
&lt;/template&gt;
&lt;script setup&gt;
import { provide } from &quot;vue&quot;;
import Parent from &quot;@/components/Parent.vue&quot;;
provide(&quot;name&quot;, &quot;Andy&quot;);
&lt;/script&gt;
</code></pre>
<pre><code class="language-javascript">Parent.vue
&lt;template&gt;
&lt;Child&gt;&lt;/Child&gt;
&lt;/template&gt;
&lt;script setup&gt;
import { inject } from &quot;vue&quot;;
import Child from &quot;@/components/Child.vue&quot;;
let appinfo = inject(&quot;name&quot;);
console.log('parent:', appinfo);
&lt;/script&gt;
</code></pre>
<pre><code class="language-javascript">Child.vue
&lt;template&gt;&lt;/template&gt;
&lt;script setup&gt;
import { inject } from &quot;vue&quot;;
let appinfo = inject(&quot;name&quot;);
console.log('child:', appinfo);
&lt;/script&gt;
</code></pre>
<p>App 向 Parent 和 Child 传值</p>