Vue插槽

Vue插槽

2022 年 03 月 07 日

1075 次浏览

465字数

<h2 id="一-什么是插槽">一、什么是插槽？</h2>

<p>插槽（Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的 部分定义为插槽。提高组件的复用性。</p>

<ul><li><strong>插槽基本用法</strong></li></ul>

<figure class="wp-block-image size-large"><img src="https://www.xxhzm.cn/usr/uploads/2022/03/image-14-1024x580.png" alt="" class="wp-image-583"style=""></figure>

<p>在父组件中写一个标签，在子组件中放入&lt;slot&gt;&lt;/slot&gt;插槽命令</p>

<p>如果需要把指定内容渲染到指定插槽中，需要使用v-slot这个指令</p>

<p>v-slot后面需要跟插槽的name</p>

<p>v-slot不可以直接用在元素上，需要放到template标签上</p>

<p>template是一个虚拟的标签，只起到包裹作用，不会被渲染为任何实质性的HTML元素</p>

<p>v-slot可以简写为#</p>

<h2 id="二-具名插槽">二、<strong>具名插槽</strong></h2>

<p>如果在封装组件时需要预留多个插槽节点，则需要为每个 &lt;slot> 插槽指定具体的 name 名称。这种带有具体 名称的插槽叫做“具名插槽”。示例代码如下</p>

<figure class="wp-block-image size-full"><img src="https://www.xxhzm.cn/usr/uploads/2022/03/image-15.png" alt="" class="wp-image-585"style=""></figure>

<h2 id="三-作用域插槽">三、作用域插槽</h2>

<p>在封装组件时，为预留的&lt;slot>提供属性对应的值，这种用法，叫做作用域插槽。示例代码如下</p>

<figure class="wp-block-image size-large"><img src="https://www.xxhzm.cn/usr/uploads/2022/03/image-16-1024x344.png" alt="" class="wp-image-587"style=""></figure>

<p></p>