slot 插槽
<p>具名插槽
子组件给父组件留个位置需要父组件来填</p>
<pre><code class="language-javascript">App.vue
&lt;template&gt;
&lt;h1&gt;父组件开始&lt;/h1&gt;
&lt;Child&gt;
&lt;template v-slot:rear&gt;
&lt;p&gt;我是rear部分&lt;/p&gt;
&lt;/template&gt;
&lt;template v-slot:head&gt;
&lt;p&gt;我是head部分&lt;/p&gt;
&lt;/template&gt;
&lt;/Child&gt;
&lt;h1&gt;父组件结束&lt;/h1&gt;
&lt;/template&gt;
&lt;script setup&gt;
import Child from &quot;@/components/Child.vue&quot;;
&lt;/script&gt;
</code></pre>
<pre><code class="language-javascript">Child.vue
&lt;template&gt;
&lt;h2&gt;子组件开始&lt;/h2&gt;
&lt;slot name=&quot;head&quot;&gt;&lt;/slot&gt;
&lt;slot name=&quot;rear&quot;&gt;&lt;/slot&gt;
&lt;h2&gt;子组件结束&lt;/h2&gt;
&lt;/template&gt;</code></pre>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=5c416d28482ee25116e80a4362f0c62f" alt="" /></p>
<hr />
<p><strong>作用域插槽</strong>
数据在子组件，但是根据数据生成的结构，要由父组件决定
压岁钱在孩子那，但根据压岁钱买的东西，要由父亲决定</p>