黄骅网站建设百度网盘网页版

1、意义

插槽是vue提供的一个内置组件，是一个占位符。作用是可以向组件中传递一段html代码，加强了组件封装性以及复用性。

2、分类

插槽通常分为匿名插槽、具名插槽、作用域插槽

匿名插槽：

顾名思义就是没有名字的插槽，我们通常是通过匿名插槽把我们在子组件标签内写的html全部渲染到子组件中

//子组件标签
<SlotTest :list="list"><form><h3>我是匿名插槽的数据</h3><input type="text" placeholder="请输入内容"></form>
</SlotTest>

<template><div class="slotChild"><h1>我是插槽组件</h1><slot></slot><!-- 匿名插槽 --></div>
</template>

具名插槽：

有名字的插槽，通常是将我们想要定义的html放置到对应的位置

 <SlotTest :list="list"><!-- 具名插槽 --><template #btn><button>添加</button><button>删除</button></template></SlotTest>

<template><div class="slotChild"><h1>我是插槽组件</h1><slot name="btn"></slot></div>
</template>

作用域插槽：

通常通过插槽传递列表以后，我们想要执行一些操作，但是无法获取到数据，通过作用域插槽可以获取子组件中的值，父组件可以获取值从而进行业务逻辑处理。

<SlotTest :list="list"><template #btn="childProps"><pre>{{ childProps }}</pre><button>添加</button><button @click="del(childProps.item.ind)">删除</button><!-- <button @click="del(childProps.item.id)">删除</button> --></template>
</SlotTest>

<template><div class="slotChild"><h1>我是插槽组件</h1><ul><li v-for="(i, ind) in list" :key="i.id">{{ i.name }}<!-- 具名插槽 --><!-- 作用域插槽(通过slot上传递属性) --><slot name="btn" :item="{ i, ind }"></slot></li></ul></div>
</template>

在render中如何获取插槽内容？

匿名插槽：vm.$slots.default

具名插槽：vm.$slots.name

作用域插槽：vm.$scopeSlots